Skip to content

Instantly share code, notes, and snippets.

@ragingwind

ragingwind/flipclock.html

Created August 25, 2019 20:29
Show Gist options
  • Save ragingwind/9d9193ec03d349ceec1737e382a37817 to your computer and use it in GitHub Desktop.
Save ragingwind/9d9193ec03d349ceec1737e382a37817 to your computer and use it in GitHub Desktop.
Download ZIP
Classic Flipclock
Raw
flipclock.html
<!--
* Copyright (c) 2010 devnight.net. All rights reserved. Use of this
* source code is governed by a MIT license that can be found in the
* LICENSE file.
-->
<!DOCTYPE html>
<html>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
var flipclock = {
dayofweek: ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"],
monthofyear: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
init: function() {
// set font size, is base on the height of bounds.
var targetsize = Math.max($(".leaves").height() / 2, $(".leaves").width());
var fontsize = Math.floor(targetsize * 0.80);
var font = fontsize + "px 'arial'";
$(".leave-text").css("font", font);
$(".leave-text").css("font-weight", 900);
// relocate the number's position.
var c = Math.floor(($(".leaves").height() / 2) - fontsize);
var gap_top = fontsize * 0.05;
var gap = fontsize * 0.08;
$(".leave-inner-top").css("top", c + (fontsize / 2) - gap_top);
$(".leave-inner-bottom").css("top", -(fontsize / 2) - gap);
},
flipAnimationStart: function(t, command, delegate) {
$(t).css("-webkit-animation", "none");
$(t)[0].addEventListener("webkitAnimationEnd", delegate, false);
window.setTimeout(function() {
$(t).css("-webkit-animation", command);
}, 0);
},
flip: function(t, n) {
var now_top = $(t).find(".now-top");
var now_bottom = $(t).find(".now-bottom");
var flip_top = $(t).find(".flip-top");
var flip_bottom = $(t).find(".flip-bottom");
// set previous time to flip-top-leave and show the leave for animation.
$(flip_top).find(".leave-text").html($(now_top).find(".leave-text").html());
$(flip_top).css("visibility", "visible");
// set current time to now-leave
$(now_top).find(".leave-text").html(n);
var bottomflipAnimationDidStop = function(e) {
$(flip_bottom)[0].removeEventListener("webkitAnimationEnd", bottomflipAnimationDidStop, false);
// set current time to now-bottom-leave.
$(now_bottom).find(".leave-text").html(n);
};
var topflipAnimationDidStop = function(e) {
$(flip_top)[0].removeEventListener("webkitAnimationEnd", topflipAnimationDidStop, false);
// hidding flip-top-leave when animation is endded.
$(flip_top).css("visibility", "hidden");
// WARNINNG. DON'T REMOVE.
// hidding flip-bottom-leave for blink-proof in chrome.
// this code creates a afterimage in safari
$(flip_bottom).css("visibility", "hidden");
$(flip_bottom).find(".leave-text").html(n);
flipclock.flipAnimationStart($(flip_bottom), "flip-down 0.5s 0 ease-out", bottomflipAnimationDidStop);
};
flipclock.flipAnimationStart($(flip_top), "flip-top 0.5s 0 linear", topflipAnimationDidStop);
},
date: function(l, dt) {
console.log($(l).find(".leave-bottom").find(".datetime"));
var t = $(l).find(".leave-bottom").find(".datetime").html(dt);
},
adjustHours: function(t) {
return (t > 12) ? (t - 12) : ((t == 0) ? 12 : t) ;
},
adjustMinutes: function(t) {
return (t < 10) ? t = "0" + t : t;
},
adjustDigit: function(t) {
return (t < 10) ? t = "0" + t : t;
},
tick: function() {
var now = new Date();
var hour = flipclock.adjustHours(now.getHours());
var min = flipclock.adjustMinutes(now.getMinutes());
var sec = flipclock.adjustDigit(now.getSeconds());
if ($("#hh-leaves").find(".now-top").find(".leave-text").text() != hour.toString()) {
flipclock.flip("#hh-leaves", hour);
var dt = flipclock.dayofweek[now.getDay()] + ", " + now.getDate() + " " + flipclock.monthofyear[now.getMonth()];
flipclock.date("#hh-leaves", dt);
}
if ($("#mm-leaves").find(".now-top").find(".leave-text").text() != min)
flipclock.flip("#mm-leaves", min);
flipclock.flip("#ss-leaves", sec);
},
start: function() {
window.setInterval(flipclock.tick, 1000);
},
resize:function() {
$("#flipclock").css("top", ((window.innerHeight - $("#flipclock").height()) / 2));
$("#flipclock").css("left", ((window.innerWidth - $("#flipclock").width()) / 2));
}
};
$(document).ready(function() {
flipclock.init();
flipclock.start();
flipclock.resize();
});
$(window).resize(function() {
flipclock.resize();
});
</script>
<style>
@-webkit-keyframes flip-top {
0% {-webkit-transform: rotateX(0deg);}
50% {-webkit-transform: rotateX(0deg);}
75% {}
100% {-webkit-transform: rotateX(-90deg);}
}
@-webkit-keyframes flip-down {
0% {visibility:visible;-webkit-transform: rotateX(90deg);}
50% {webkit-transform: rotateX(45deg);}
75% {}
100% {-webkit-transform: rotateX(0deg);}
}
.leaves {
float: left;
position: relative;
width:200px;
height:225px;
margin:5px 2px 5px 4px;
border-radius: 12px;
}
.wheel-box {
float: left;
position: relative;
}
.wheel-box-inner {
top:100px;
width:18px;
height:35px;
padding:0px 0px 0px 0px;
}
.wheel-box-outter {
top:109px;
width:5px;
height:20px;
padding:0px 0px 0px 0px;
}
.wheel {
position:absolute;
border-radius:5px;
width:100%;
height:100%;
border:2px solid rgba(40,40,40,0.5);
background-color: #1f1f1f;
}
.wheel-inner {
background-image:-webkit-gradient(linear,
left top, left bottom,
from(rgba(0,0,0,1)),
color-stop(0.0, rgba(0,0,0,0)),
color-stop(0.4, rgba(0,0,0,0)),
to(rgba(0,0,0,1))),
-webkit-gradient(radial, 0 0, 10, 10 10, 8,
from(rgba(0,0,0,1)), to(rgba(100,100,100,0.8)));
}
.wheel-outter {
background-image:-webkit-gradient(linear,
left top, left bottom,
from(rgba(0,0,0,1)),
color-stop(0.0, rgba(0,0,0,0)),
color-stop(0.4, rgba(0,0,0,0)),
to(rgba(0,0,0,1))),
-webkit-gradient(radial, 0 0, 10, 10 10, 10,
from(rgba(0,0,0,1)), to(rgba(255,255,255,0.8)));
}
.leave {
width: 100%;
height: 50%;
float: left;
overflow:hidden;
}
.leave-top {
position: absolute;
top: 0px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
background-color: #1f1f1f;
background-image: -webkit-gradient(linear,
left top, left bottom,
from(rgba(0,0,0,1)),
to(rgba(50,50,50,1)));
border-top:1px solid #000;
}
.leave-bottom {
margin-top:0px;
position: absolute;
top:52%;
border-bottom-right-radius:12px;
border-bottom-left-radius:12px;
background-color: #1f1f1f;
background-image: -webkit-gradient(linear,
left bottom, left top,
from(rgba(0,0,0,1)),
to(rgba(50,50,50,1)));
text-shadow: 0.0em 0.1em 0.1em rgb(191,191,191);
border-bottom:1px solid #000;
-webkit-box-shadow:0em -0.1em 0em #888;
}
.now-top {
}
.now-bottom {
}
.flip-top {
-webkit-transform-origin: bottom;
z-index:1;
}
.flip-bottom {
-webkit-transform-origin: top;
z-index:1;
}
.leave-inner {
text-align: center;
position: relative;
}
.leave-text {
padding:0px;
margin:0px;
color:#ffffff;
-webkit-mask-image: -webkit-gradient(linear,
left top, left bottom,
from(rgba(0,0,0,0)),
color-stop(0.3, rgba(0,0,0,1)),
color-stop(0.7, rgba(0,0,0,1)),
to(rgba(0,0,0,0)));
position:relative;
}
.leave-back {
position:absolute;
left:0px;
width:100%;
}
.leave-back-1 {
height:103%;
top:-4px;
border-radius:12px;
background-color: #1f1f1f;
border-bottom:1px solid #999;
border-top:1px solid #999;
-webkit-box-shadow:0em 1.0px 0.1em #111;
}
.leave-back-2 {
height:103%;
top:-3px;
border-radius:12px;
background-color: #1f1f1f;
border-bottom:1px solid #333;
border-top:1px solid #333;
-webkit-box-shadow:0em -1.0px 0.8em #111;
}
.leave-back-3 {
height:103%;
top:-1px;
border-radius:12px;
background-color: #1f1f1f;
border-bottom:1px solid #666;
border-top:1px solid #222;
}
.datetime {
text-shadow: 0.0em 0.1em 0.0em rgb(200,200,200);
position:absolute;
color:#fff;
z-index:100000;
top:100%;
left:10px;
font:0.8em "arial";
font-weight:500;
-webkit-mask-image: -webkit-gradient(linear,
left top, left bottom,
from(rgba(0,0,0,0)),
color-stop(0.3, rgba(0,0,0,1)),
color-stop(0.7, rgba(0,0,0,1)),
to(rgba(0,0,0,0)));
}
#flipclock {
position:absolute;
border:0px solid lightgray;
}
.doc {
position:absolute;
width:100%;
height:100%;
background-image:-webkit-gradient(radial,
50% 50%, 20, 50% 50%, 2000,
from(rgba(15,15,15,0.9)), color-stop(14%, rgba(0,0,0,1)), to(rgba(5,5,5,1)))
}
</style>
</head>
<body style="padding:0px;margin:0px">
<dic class="doc">
<div id="flipclock">
<div class="wheel-box wheel-box-outter"><div class="wheel wheel-outter"></div></div>
<div id="hh-leaves" class="leaves">
<div class="leave-back leave-back-1"></div>
<div class="leave-back leave-back-2"></div>
<div class="leave-back leave-back-3"></div>
<div class="leave leave-top now-top"><div class="leave-inner leave-inner-top"><span class="leave-text"></span></div></div>
<div class="leave leave-bottom now-bottom"><div class="leave-inner leave-inner-bottom"><span class="leave-text"></span><div class="datetime"></div></div></div>
<div class="leave leave-top flip-top"><div class="leave-inner leave-inner-top"><span class="leave-text"></span></div></div>
<div class="leave leave-bottom flip-bottom"><div class="leave-inner leave-inner-bottom"><span class="leave-text"></span></div></div>
</div>
<div class="wheel-box wheel-box-inner"><div class="wheel wheel-inner"></div></div>
<div id="mm-leaves" class="leaves">
<div class="leave-back leave-back-1"></div>
<div class="leave-back leave-back-2"></div>
<div class="leave-back leave-back-3"></div>
<div class="leave leave-top now-top"><div class="leave-inner leave-inner-top"><span class="leave-text"></span></div></div>
<div class="leave leave-bottom now-bottom"><div class="leave-inner leave-inner-bottom"><span class="leave-text"></span></div></div>
<div class="leave leave-top flip-top"><div class="leave-inner leave-inner-top"><span class="leave-text"></span></div></div>
<div class="leave leave-bottom flip-bottom"><div class="leave-inner leave-inner-bottom"><span class="leave-text"></span></div></div>
</div>
<div class="wheel-box wheel-box-inner"><div class="wheel wheel-inner"></div></div>
<div id="ss-leaves" class="leaves">
<div class="leave-back leave-back-1"></div>
<div class="leave-back leave-back-2"></div>
<div class="leave-back leave-back-3"></div>
<div class="leave leave-top now-top"><div class="leave-inner leave-inner-top"><span class="leave-text"></span></div></div>
<div class="leave leave-bottom now-bottom"><div class="leave-inner leave-inner-bottom"><span class="leave-text"></span></div></div>
<div class="leave leave-top flip-top"><div class="leave-inner leave-inner-top"><span class="leave-text"></span></div></div>
<div class="leave leave-bottom flip-bottom"><div class="leave-inner leave-inner-bottom"><span class="leave-text"></span></div></div>
</div>
<div class="wheel-box wheel-box-outter"><div class="wheel wheel-outter"></div></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment