Sky Clock
How do I make an sky clock?
Work in progress, sky changes along with the display time. Cloud shapes from: http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background. What is a sky clock? How do you make a sky clock? This script and codes were developed by Ash on 09 August 2022, Tuesday.
Sky Clock Previews
Sky Clock - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sky Clock</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="bgd"> <div id="skydeco"> <div class="cloud1"></div> <div class="cloud2"></div> <div class="cloud3"></div> </div> <div id="clock"></div>
</div> <script src="js/index.js"></script>
</body>
</html>Sky Clock - Script Codes CSS Codes
body,
html { height: 100%; margin: 0; padding: 0; overflow: hidden;
}
#bgd { height: 100%; width: 100%; margin: 0;
}
#clock { margin: 0 auto; transform: translateY(50%); color: #eee; font-family: 'Open Sans Condensed', sans-serif; font-size: 64px; font-weight: 700; line-height: 64px; margin: 0 0 0; padding: 20px 30px; text-align: center; text-transform: uppercase; text-shadow: 2px 2px rgba(0,0,0,0.2);
}
.night { background-color: #3c4145;
}
.night:after { position: absolute; content: ""; top: 200px; left: 70%; height: 100px; width: 100px; border-radius: 50%; background-color: #fff; border: 5px solid #e3e3c7; -webkit-box-shadow: 0px 0px 218px 30px rgba(255,255,255,1);
-moz-box-shadow: 0px 0px 218px 30px rgba(255,255,255,1);
box-shadow: 0px 0px 218px 30px rgba(255,255,255,1); animation: orbit 200s linear infinite;
}
.night:before { position: absolute; content: ""; display: block; top: 10px; left: 25%; width: 20px; height: 20px; border-radius: 50%; background-color: #fff; box-shadow: rgba(255, 255, 255, 0.1) 1000px 5px 0 0, rgba(255, 255, 255, 0.1) 122px 12px 0 -1px, #fff 328px 155px 0 1px, rgba(255, 255, 255, 0.1) 320px 34px 0 0, #fff 200px 240px 0 -1.5px, rgba(255, 255, 255, 0.1) 500px 200px 0 1px, #fff 879px 135px 0 0; animation: twinkle 2s linear infinite; animation-direction: alternate;
}
.morning { background-color: #9ee3fb; background: linear-gradient(180deg, #9ee3fb 0%, #CCEEF9 100%);
}
.morning:after,
.day:after { position: absolute; content: ""; top: 200px; left: 70%; height: 100px; width: 100px; border-radius: 50%; background-color: #ffdf6d; border: 5px solid #FFDB66; -webkit-box-shadow: 0px 0px 218px 30px rgba(255,223,109,1);
-moz-box-shadow: 0px 0px 218px 30px rgba(255,223,109,1);
box-shadow: 0px 0px 218px 30px rgba(255,223,109,1); animation: orbit 200s linear infinite;
}
.day { background-color: #86c3d7; background: linear-gradient(180deg, #86c3d7 0%, #CCEEF9 100%);
}
.noon { background: linear-gradient(180deg, #86C3D7 0%, #FFB970 100%);
}
.noon:after { position: absolute; content: ""; top: 200px; left: 70%; height: 100px; width: 100px; border-radius: 50%; background-color: #FFCD2B; border: 5px solid #FFBF00; -webkit-box-shadow: 0px 0px 218px 30px #FFCD2B;
-moz-box-shadow: 0px 0px 218px 30px #FFCD2B;
box-shadow: 0px 0px 218px 30px #FFCD2B; animation: orbit 200s linear infinite;
}
#skydeco { margin: 0 auto; width: 100%; position: absolute;
}
.cloud1 { width: 270px; height: 110px; background: #fff; border-radius: 200px; -moz-border-radius: 200px; -webkit-border-radius: 200px; position: relative; opacity: 0.8; animation: cloudy 40s linear infinite; animation-direction: alternate;
}
.cloud1:before,
.cloud1:after { content: ''; position: absolute; background: #fff; width: 150px; height: 130px; position: absolute; top: -15px; left: 10px; border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; -webkit-transform: rotate(30deg); transform: rotate(30deg); -moz-transform: rotate(30deg);
}
.cloud1:after { width: 170px; height: 170px; top: -55px; left: auto; right: 15px;
}
.cloud2 { width: 250px; height: 100px; background: #fff; border-radius: 200px; -moz-border-radius: 200px; -webkit-border-radius: 200px; position: relative; top: 100px; opacity: 0.6; animation: cloudy 30s linear infinite;
}
.cloud2:before,
.cloud2:after { content: ''; position: absolute; background: #fff; width: 150px; height: 130px; position: absolute; top: -25px; left: 10px; border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; -webkit-transform: rotate(30deg); transform: rotate(30deg); -moz-transform: rotate(30deg);
}
.cloud2:after { width: 150px; height: 150px; top: -30px; left: auto; right: 15px;
}
.cloud3 { width: 200px; height: 90px; background: #fff; border-radius: 200px; -moz-border-radius: 200px; -webkit-border-radius: 200px; position: absolute; top: 100px; right: 0px; opacity: 0.6; animation: cloudy 45s linear infinite; animation-direction: alternate;
}
.cloud3:before,
.cloud3:after { content: ''; position: absolute; background: #fff; width: 110px; height: 110px; position: absolute; top: -25px; left: 10px; border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; -webkit-transform: rotate(30deg); transform: rotate(30deg); -moz-transform: rotate(30deg);
}
.cloud3:after { width: 90px; height: 110px; top: -30px; left: auto; right: 35px;
}
@keyframes twinkle { 0% { opacity: 0.2; } 50% { opacity: 0.5; } 75% { opacity: 0.2; } 100% { opacity: 0.5; }
}
@keyframes orbit { 0% { left: 0%; top: 40%; } 25% { left: 25%; top: 30%; } 50% { left: 50%; top: 20%; } 75% { left: 75%; top: 30%; } 100% { left: 100%; top: 50%; }
}
@keyframes cloudy { 0% { left: 100%; } 100% { left: -250px; }
}Sky Clock - Script Codes JS Codes
function startTime() { var d = new Date(); var h = d.getHours(); var m = d.getMinutes(); var s = d.getSeconds(); m = checkTime(m); s = checkTime(s); document.getElementById('clock').innerHTML = h + ":" + m + ":" + s; var t = setTimeout(function() { startTime() }, 500); if (h < 11) document.getElementById("bgd").className = " morning"; else if (h < 16) document.getElementById("bgd").className = " day"; else if (h < 20) document.getElementById("bgd").className = " noon"; else if (h < 24) document.getElementById("bgd").className = " night", document.getElementById("skydeco").style.display = "none"; else if (h < 6) document.getElementById("bgd").className = " night", document.getElementById("skydeco").style.display = "none";
}
function checkTime(i) { if (i < 10) { i = "0" + i }; return i;
}
startTime()
| Developer | Ash |
| Username | littleginger |
| Uploaded | August 09, 2022 |
| Rating | 3 |
| Size | 2,973 Kb |
| Views | 48,576 |
Do you need developer help for Sky Clock?
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!
Ash (littleginger) Script Codes
| Name | Size |
| Button | 2,144 Kb |
| Isometric Grid Map | 6,298 Kb |
| Cute Tags | 3,091 Kb |
| Squares | 2,348 Kb |
| Pixel Cafe Menu | 5,209 Kb |
| A Pen by Ash | 2,386 Kb |
| Contact Envelope | 3,257 Kb |
| Window | 4,246 Kb |
| Sidebar Demo | 2,612 Kb |
| Contact form | 2,294 Kb |
Create amazing marketing copy with AI!
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!
Similar Scripts & Codes
| Name | Username | Size |
| CSS Social Media Icon | TychoBlender | 3,871 Kb |
| Virtual vinyl | Davidpanik | 3,474 Kb |
| A Pen by Bryan | Brydave | 2,286 Kb |
| Tab panels | Accessibility | 0 Kb |
| Loading animation with css | Icebob | 2,947 Kb |
| Base-Style | Daniel_gooss | 2,614 Kb |
| CSS Tooltips | Darylldoyle | 2,599 Kb |
| Starfield using KineticJS | Asp | 3,512 Kb |
| Pricing Table | Semenchenko | 6,784 Kb |
| Rows with image hover effect | Amit-webdesigner | 12,875 Kb |
Do you want hide your ip address?
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!