Flipping Clock
How do I make an flipping clock?
What is a flipping clock? How do you make a flipping clock? This script and codes were developed by Endre Simo on 28 November 2022, Monday.
Flipping Clock - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flipping Clock</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Based on https://codepen.io/martingrand/pen/pqxtc-->
<div class="clock"> <h1>Current time is:<br/> <div class="counter hours"> <span class="decor top"></span> <span class="decor bottom"></span> <span class="from top"><span></span><span class="shadow"></span></span> <span class="from bottom"><span></span><span class="shadow"></span></span> <span class="to top"><span></span><span class="shadow"></span></span> <span class="to bottom"><span></span><span class="shadow"></span></span> </div> <span>:</span> <div class="counter minutes"> <span class="decor top"></span> <span class="decor bottom"></span> <span class="from top"><span></span><span class="shadow"></span></span> <span class="from bottom"><span></span><span class="shadow"></span></span> <span class="to top"><span></span><span class="shadow"></span></span> <span class="to bottom"><span></span><span class="shadow"></span></span> </div> <span>:</span> <div class="counter seconds"> <span class="decor top"></span> <span class="decor bottom"></span> <span class="from top"><span></span><span class="shadow"></span></span> <span class="from bottom"><span></span><span class="shadow"></span></span> <span class="to top"><span></span><span class="shadow"></span></span> <span class="to bottom"><span></span><span class="shadow"></span></span> </div> </h1>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Flipping Clock - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Oswald:700);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300);
body { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZSiLoAAAAHElEQVQIHWP48+fP9+/f////zwCkgBwQC4ghAACODRqkCkEF0QAAAABJRU5ErkJggg==');
}
.clock { position: relative; margin-bottom: 60px;
}
.clock h1 { font-family: 'Roboto Condensed', cursive; text-align: center; line-height: 100px; font-size: 28px; font-weight: normal; color: #939393;
}
.clock h1 > span { color: #3B8686; font-size: 50px;
}
.clock h1 .counter { font-size: 50px; width: 80px; height: 50px; font-family: 'Oswald', sans-serif; font-weight: 700; display: inline-block; padding: 0 30px 0 10px; perspective: 200px; position: relative; top: -7px;
}
.clock h1 .counter > span { display: block; position: absolute; overflow: hidden; padding: 0 25px; background: -webkit-gradient(linear, 0 0, 0 100%, from(#FFF), to(#f2f2f2)); background: -webkit-linear-gradient(#FFF 0%, #f2f2f2 100%); background: -moz-linear-gradient(#FFF 0%, #f2f2f2 100%); background: -o-linear-gradient(#FFF 0%, #f2f2f2 100%); background: -ms-linear-gradient(#FFF 0%, #f2f2f2 100%); background: linear-gradient(#FFF 0%, #f2f2f2 100%); height: 45px; width: 50px; text-align: center; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;
}
.clock h1 .counter > span span { color: #8fc400; background: -webkit-linear-gradient(#8fc800, #62CC00); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.clock h1 .counter > span.decor.top { -webkit-box-shadow: 0 24px 43px -3px rgba(0, 0, 0, 0.45); box-shadow: 0 24px 43px -3px rgba(0, 0, 0, 0.45);
}
.clock h1 .counter > span.decor.bottom { -webkit-box-shadow: 0 2px 0px -1px #d8d8d8, 0 4px 0px -2px #c7c7c7, 0 6px 0px -3px #d8d8d8, 0 8px 0px -4px #c6c6c6, 0 10px 0px -5px #d6d6d6, 0 12px 0px -6px #c9c9c9, 0 14px 0px -7px #d8d8d8, 0 14px 23px -9px rgba(0, 0, 0, 0.8); box-shadow: 0 2px 0px -1px #d8d8d8, 0 4px 0px -2px #c7c7c7, 0 6px 0px -3px #d8d8d8, 0 8px 0px -4px #c6c6c6, 0 10px 0px -5px #d6d6d6, 0 12px 0px -6px #c9c9c9, 0 14px 0px -7px #d8d8d8, 0 14px 23px -9px rgba(0, 0, 0, 0.8);
}
.clock h1 .counter > span.top { -webkit-box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.2); border-radius: 3px 3px 0 0;
}
.clock h1 .counter > span.top span { position: relative; bottom: 5px;
}
h1 .counter > span.bottom { top: 46px; -webkit-box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.2); border-radius: 0 0 3px 3px;
}
.clock h1 .counter > span.bottom span { position: relative; top: -51px;
}
.clock h1 .counter > span.from.bottom { z-index: 1; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-animation: from-flip 1s; -moz-animation: from-flip 1s; -ms-animation: from-flip 1s; -o-animation: from-flip 1s; animation: from-flip 1s;
}
.clock h1 .counter > span.to.top { z-index: 1; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-animation: to-flip 1s; -moz-animation: to-flip 1s; -ms-animation: to-flip 1s; -o-animation: to-flip 1s; animation: to-flip 1s;
}
@keyframes "from-flip" { 0% { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -o-transform: rotateX(180deg); -ms-transform: rotateX(180deg); transform: rotateX(180deg); } 100% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -o-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); }
}
@-moz-keyframes from-flip { 0% { -moz-transform: rotateX(180deg); transform: rotateX(180deg); } 100% { -moz-transform: rotateX(0deg); transform: rotateX(0deg); }
}
@-webkit-keyframes "from-flip" { 0% { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }
}
@-ms-keyframes "from-flip" { 0% { -ms-transform: rotateX(180deg); transform: rotateX(180deg); } 100% { -ms-transform: rotateX(0deg); transform: rotateX(0deg); }
}
@-o-keyframes "from-flip" { 0% { -o-transform: rotateX(180deg); transform: rotateX(180deg); } 100% { -o-transform: rotateX(0deg); transform: rotateX(0deg); }
}
@keyframes "to-flip" { 0% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -o-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); } 100% { -webkit-transform: rotateX(-180deg); -moz-transform: rotateX(-180deg); -o-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); transform: rotateX(-180deg); }
}
@-moz-keyframes to-flip { 0% { -moz-transform: rotateX(0deg); transform: rotateX(0deg); } 100% { -moz-transform: rotateX(-180deg); transform: rotateX(-180deg); }
}
@-webkit-keyframes "to-flip" { 0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } 100% { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); }
}
@-ms-keyframes "to-flip" { 0% { -ms-transform: rotateX(0deg); transform: rotateX(0deg); } 100% { -ms-transform: rotateX(-180deg); transform: rotateX(-180deg); }
}
@-o-keyframes "to-flip" { 0% { -o-transform: rotateX(0deg); transform: rotateX(0deg); } 100% { -o-transform: rotateX(-180deg); transform: rotateX(-180deg); }
}
@keyframes "fade-out" { 0% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } 100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; }
}
@-moz-keyframes fade-out { 0% { filter: alpha(opacity=100); opacity: 1; } 100% { filter: alpha(opacity=0); opacity: 0; }
}
@-webkit-keyframes "fade-out" { 0% { filter: alpha(opacity=100); opacity: 1; } 100% { filter: alpha(opacity=0); opacity: 0; }
}
@-ms-keyframes "fade-out" { 0% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } 100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; }
}
@-o-keyframes "fade-out" { 0% { filter: alpha(opacity=100); opacity: 1; } 100% { filter: alpha(opacity=0); opacity: 0; }
}
@keyframes "fade-in" { 0% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } 100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; }
}
@-moz-keyframes fade-in { 0% { filter: alpha(opacity=0); opacity: 0; } 100% { filter: alpha(opacity=100); opacity: 1; }
}
@-webkit-keyframes "fade-in" { 0% { filter: alpha(opacity=0); opacity: 0; } 100% { filter: alpha(opacity=100); opacity: 1; }
}
@-ms-keyframes "fade-in" { 0% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } 100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; }
}
@-o-keyframes "fade-in" { 0% { filter: alpha(opacity=0); opacity: 0; } 100% { filter: alpha(opacity=100); opacity: 1; }
}
.counter .shadow { display: block; width: 120px; height: 45px; left: -25px; top: -100px !important; overflow: hidden; z-index: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0;
}
.counter .top .shadow { background: -webkit-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%); background: -moz-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%); background: -o-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%); background: -ms-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%); background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
}
.counter .bottom .shadow { background: -webkit-linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); background: -moz-linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); background: -o-linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); background: -ms-linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
}
.counter .from.top .shadow { -webkit-animation: fade-out 1s; -moz-animation: fade-out 1s; -ms-animation: fade-out 1s; -o-animation: fade-out 1s; animation: fade-out 1s;
}
.counter .to.bottom .shadow { -webkit-animation: fade-in 1s; -moz-animation: fade-in 1s; -ms-animation: fade-in 1s; -o-animation: fade-in 1s; animation: fade-in 1s;
}
Flipping Clock - Script Codes JS Codes
var min_id = null;
var hour_id = null;
!function(d,w){ calculateTime(); getMinutes(); getHours(); setInterval(calculateTime, 1000);
}(document, window);
function calculateTime() { $('.seconds .to') .addClass('hide') .removeClass('to') .addClass('from') .removeClass('hide') .addClass('n') .find('span:not(.shadow)').each(function (i, el) { $(el).text(getSeconds()); }); $('.seconds .from:not(.n)') .addClass('hide') .addClass('to') .removeClass('from') .removeClass('hide') .find('span:not(.shadow)').each(function (i, el) { $(el).text(getSeconds()); }); $('.seconds .n').removeClass('n');
}
function getHours() { var hour = new Date().getHours(); hour = (hour < 10) ? "0" + hour : hour; $('.hours .to') .addClass('hide') .removeClass('to') .addClass('from') .removeClass('hide') .addClass('n') .find('span:not(.shadow)').each(function (i, el) { $(el).text(hour); }); $('.hours .from:not(.n)') .addClass('hide') .addClass('to') .removeClass('from') .removeClass('hide') .find('span:not(.shadow)').each(function (i, el) { $(el).text(hour); }); $('.hours .n').removeClass('n'); window.clearTimeout(hour_id);
}
function getMinutes() { var min = new Date().getMinutes(); min = (min < 10) ? "0" + min : min; $('.minutes .to') .addClass('hide') .removeClass('to') .addClass('from') .removeClass('hide') .addClass('n') .find('span:not(.shadow)').each(function (i, el) { $(el).text(min); }); $('.minutes .from:not(.n)') .addClass('hide') .addClass('to') .removeClass('from') .removeClass('hide') .find('span:not(.shadow)').each(function (i, el) { $(el).text(min); }); $('.minutes .n').removeClass('n'); window.clearTimeout(min_id); if ( (parseInt(min) === 0) && (parseInt(getSeconds()) === 0)) { hour_id = window.setTimeout(getHours, 1000); }
}
function getSeconds() { var sec = new Date().getSeconds(); if (parseInt(sec) >= 59) { min_id = window.setTimeout(getMinutes, 1000); } return (sec < 10 ? '0' + sec : sec);
}
Developer | Endre Simo |
Username | esimov |
Uploaded | November 28, 2022 |
Rating | 3.5 |
Size | 3,804 Kb |
Views | 10,120 |
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 |
Worley noise cellular pattern | 8,070 Kb |
DeJong attractor | 6,155 Kb |
Perlin metaball | 7,396 Kb |
Growing tree | 5,833 Kb |
Navier Stoke Fluid Simulation | 8,584 Kb |
Fractal Tree | 2,790 Kb |
Minecraft map generator | 7,723 Kb |
404 canvas page | 7,078 Kb |
Spirograph | 2,519 Kb |
Perlin Noise based Minecraft Tunnel | 9,853 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 |
Spin | Elalemanyo | 8,262 Kb |
Portfolio Page | KaylaMT | 1,983 Kb |
Bootstrap example | Ssaakkaa | 2,716 Kb |
Fluid Layout with Float | Jxqr97 | 1,785 Kb |
The Fly | GianlucaGuarini | 3,405 Kb |
Falling Down the Rabbit Hole | Rachelnabors | 4,578 Kb |
Use the Twitchtv JSON API | Roksanaop | 3,561 Kb |
Two joint circles - One element | Berdejitendra | 1,704 Kb |
Clock with full screen background | Owebboy | 2,415 Kb |
3D-box | Parthviroja | 2,346 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!