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 |
DeJong attractor | 6,155 Kb |
Worley noise cellular pattern | 8,070 Kb |
Minecraft map generator | 7,723 Kb |
Perlin Noise based Minecraft Tunnel | 9,853 Kb |
404 canvas page | 7,078 Kb |
Perlin metaball | 7,396 Kb |
Landscape | 3,792 Kb |
Fractal Tree | 2,790 Kb |
Growing tree | 5,833 Kb |
Navier Stoke Fluid Simulation | 8,584 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 |
Fixed Scrolling Nav Bar | Philsinatra | 0 Kb |
Delete Hover | Chungman93 | 2,557 Kb |
Pricing Table | Semenchenko | 6,784 Kb |
Twitch.tv API | Ryzokuken | 2,618 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
Knob rotation | Alemesre | 2,122 Kb |
Navcube | Wbarlow | 4,775 Kb |
Collapsing Widget | Er40 | 4,279 Kb |
Scoreboard.js basic usage | Tbleckert | 1,733 Kb |
CSS Grid Overlay | Cliffpyles | 3,090 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!