Flipping Clock

Developer
Size
3,804 Kb
Views
10,120

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 Previews

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);
}
Flipping Clock - Script Codes
Flipping Clock - Script Codes
Home Page Home
Developer Endre Simo
Username esimov
Uploaded November 28, 2022
Rating 3.5
Size 3,804 Kb
Views 10,120
Do you need developer help for Flipping 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!

Endre Simo (esimov) Script Codes
Create amazing SEO content 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!