Room
How do I make an room?
What is a room? How do you make a room? This script and codes were developed by António Capelo on 15 December 2022, Thursday.
Room - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Room</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wall"> <div class="frame"> <div class="nail"></div> <div class="frame1"> </div> </div> <div id="aclock"> <img src="https://github.com/antoniocapelo/quickies/blob/master/analog-clock/images/secondHand.png?raw=true" id="secondhand" height="50px"/> <img src="https://github.com/antoniocapelo/quickies/blob/master/analog-clock/images/minuteHand.png?raw=true" id="minutehand" height="40px"/> <img src="https://github.com/antoniocapelo/quickies/blob/master/analog-clock/images/hourHand.png?raw=true" id="hourhand" height="35px"/> </div> <div class="door"> <div class="outer closed"></div> <div class="inner closed"><div class="depth"></div></div> <div class="backg"></div> </div>
</div>
<div class="instruction">Just click on the door and say hi to Nick :) </div>
<div class="floor"></div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script> <script type="text/javascript" src="js/script.js"></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Room - Script Codes CSS Codes
* { box-sizing: border-box; transition-timing-function: ease; transition-duration: 2s; -webkit-transition-duration: 2s; /* Safari */
}
body,
html { height: 100%; padding: 0; margin: 0;
}
.wall,
.frame,
.frame1,
.door,
.floor { position: relative;
}
.wall { background-color: #B8D9D0; width: 100%; height: 600px; z-index: 0; border-bottom: 10px solid #6b5b10;
}
.wall .frame { width: 120px; height: 90px; border: 10px solid #330c0c; top: 200px; left: 100px; z-index: 1; background: url('http://i1.trekearth.com/photos/80438/gods-painting.jpg'); background-size: 120px 90px;
}
.wall .frame .nail { position: absolute; top: -60px; left: 49px; width: 10px; height: 10px; background-color: #353535; border: 3px solid #353535; border-radius: 10px;
}
.wall .frame .nail:before { content: " "; display: block; position: relative; z-index: 0; left: -7px; top: -6px; width: 58px; height: 10px; border-top: 1px solid #767676; -webkit-transform-origin: left 50%; /* Safari and Chrome */ transform: rotate(135deg); -ms-transform: rotate(135deg); /* IE 9 */ -webkit-transform: rotate(130deg); /* Safari and Chrome */
}
.wall .frame .nail:after { content: " "; display: block; position: relative; z-index: 0; left: 3px; top: -9px; width: 57px; height: 10px; border-top: 1px solid #767676; -webkit-transform-origin: left 50%; /* Safari and Chrome */ transform: rotate(50deg); -ms-transform: rotate(50deg); /* IE 9 */ -webkit-transform: rotate(50deg); /* Safari and Chrome */
}
.wall .door { border: 5px solid #6b5b10; position: relative; -webkit-perspective: 1550px; transition: all 0.5s ease; top: -90px; left: 700px; width: 300px; height: 450px; z-index: 1000;
}
.wall .door .outer { width: inherit; height: inherit; position: absolute; left: 0px; top: 0; background-color: #816E18; -webkit-transform: perspective(200px) translateZ(-200px); -transform: translateZ(200px); transform: translateZ(200px); z-index: 41; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 100% 100% 0; -o-transform-origin: 100% 100% 0; transform-origin: 100% 100% 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; /* Chrome and Safari */ -moz-backface-visibility: hidden; /* Firefox */ -ms-backface-visibility: hidden; /* Internet Explorer */
}
.wall .door .outer.closed { -webkit-transform: rotateY(0deg); -transform: rotateY(0deg); transform: rotateY(0deg);
}
.wall .door .outer.open { -webkit-transform: rotateY(80deg); -transform: rotateY(80deg); transform: rotateY(80deg);
}
.wall .door .inner { width: inherit; height: inherit; position: absolute; left: 0; top: 0; background-color: #816E18; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 100% 100% 0; -o-transform-origin: 100% 100% 0; transform-origin: 100% 100% 0; -webkit-transform: translateZ(0px); -transform: translateZ(0px); transform: translateZ(0px); z-index: 40;
}
.wall .door .inner.closed { -webkit-transform: rotateY(0deg); -transform: rotateY(0deg); transform: rotateY(0deg);
}
.wall .door .inner.open { -webkit-transform: rotateY(78deg); -transform: rotateY(78deg); transform: rotateY(78deg);
}
.wall .door .inner .depth { background-color: #6b5b10; width: 11px; height: 100%; position: absolute; left: -10px; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 100% 100% 0; -o-transform-origin: 100% 100% 0; transform-origin: 100% 100% 0; -webkit-transform: rotateY(90deg); -transform: rotateY(90deg); transform: rotateY(90deg);
}
.wall .door .backg { position: absolute; left: 0; top: 0; width: inherit; height: inherit; background: url('https://25.media.tumblr.com/90d501b16d541a0c3de46d0744409a2d/tumblr_mf03r4S5Ya1r4etbjo1_r1_500.gif'); background-size: 1000px 450px; background-position: 450px 0px; z-index: -10;
}
.closed-transform { -webkit-transform: rotateY(0deg); -transform: rotateY(0deg); transform: rotateY(0deg);
}
.instruction { position: absolute; top: 40px; left: 250px; font-family: Arial; font-weight: 400; font-size: 26px;
}
.floor { background: #c6c6c6; overflow: hidden; width: 100%; height: 100px; z-index: -100;
}
#aclock { position: relative; width: 140px; height: 140px; background-image: url('https://github.com/antoniocapelo/quickies/blob/master/analog-clock/images/clockFace.png?raw=true'); background-size: 140px 140px; left: 400px; top: 100px; text-align: center;
}
#secondhand { position: absolute; top: 23px; left: 67px; /* Transform Origin */ -webkit-transform-origin: 50% 95%; -moz-transform-origin: 50% 95%; transform-origin: 50% 95%; -webkit-transform: scale(0.45); -moz-transform-transform: scale(0.5); transform: scale(0.5); z-index: 1000;
}
#minutehand,
#hourhand { position: absolute; /* Transform Origin */ -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; transform-origin: 50% 100%; z-index: 0; -webkit-transform: scale(0.45); -moz-transform-transform: scale(0.45); transform: scale(0.45);
}
#minutehand { /*top:50px;*/ top: 30px; left: 69px;
}
#hourhand { top: 35px; left: 69px;
}
Room - Script Codes JS Codes
$( document ).ready(function() { $('.door').on('click', function() { $('.outer').toggleClass('closed').toggleClass('open'); $('.inner').toggleClass('closed').toggleClass('open'); $('.spine').toggleClass('closed').toggleClass('open'); }); updateTime();
});
function updateTime() { // Get time from moment.js with specified format var now = moment().format("hhmmssdA"); // Move the clock hands rotateHands(now[4]+now[5],now[2] + now[3],now[0] + now[1]); setTimeout(updateTime, 1000);
}
function rotateHands(sec,min,hour) { var degSec = 360/60*sec; var degMin = 360/60*min; var degHour = 360/12*hour; var sHand = $('#secondhand'); sHand.css({ "-webkit-transform": "rotate(" + degSec + "deg)", "-moz-transform": "rotate(" + degSec + "deg)", "transform": "rotate(" + degSec + "deg)" }); var mHand = $('#minutehand'); mHand.css({ "-webkit-transform": "rotate(" + degMin + "deg)", "-moz-transform": "rotate(" + degMin + "deg)", "transform": "rotate(" + degMin + "deg)" }); var hHand = $('#hourhand'); hHand.css({ "-webkit-transform": "rotate(" + degHour + "deg)", "-moz-transform": "rotate(" + degHour + "deg)", "transform": "rotate(" + degHour + "deg)" });
}
Developer | António Capelo |
Username | capelo |
Uploaded | December 15, 2022 |
Rating | 3 |
Size | 5,196 Kb |
Views | 12,144 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
ToDo | 8,475 Kb |
Brainerd scroller | 3,165 Kb |
React Boilerplate | 1,457 Kb |
Background cover | 3,735 Kb |
AngularJS Modal Factory | 3,839 Kb |
Custom checkbox example | 3,495 Kb |
Menu with following underline | 2,648 Kb |
Max-height transition | 2,643 Kb |
Clock loading | 2,351 Kb |
Gif as page background | 3,521 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
Svg penguin | _massimo | 2,990 Kb |
Shop Talk logo made in CSS | Hugo | 19,368 Kb |
Experiments with Vertical Centering | KatieK2 | 3,924 Kb |
Popover | Teles | 2,248 Kb |
Google Maps API Ground Overlay | Boycetrus | 2,961 Kb |
AngularJS Datalist Directive | M-e-conroy | 2,366 Kb |
Cake | Kennyname | 7,220 Kb |
Playing with transition timing | Mattgrosswork | 1,993 Kb |
Comparison of Roboto Draft vs Roboto | Jxnblk | 2,880 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!