Skip to content

Instantly share code, notes, and snippets.

@dmail

dmail/countdown.html

Created October 5, 2015 13:47
Show Gist options
  • Save dmail/80de4dad5c175359cca5 to your computer and use it in GitHub Desktop.
Save dmail/80de4dad5c175359cca5 to your computer and use it in GitHub Desktop.
Download ZIP
A countdown based on jQuery finalcountdown
Raw
countdown.html
<!doctype html>
<html>
<head>
</head>
<body>
<div class="countdown">
</div>
<!-- http://hilios.github.io/jQuery.countdown/ -->
<style>
body{
background-color: #78195D;
}
*{
box-sizing: border-box;
}
*[data-template]{
display: none;
}
.countdown{
height: 130px;
display: inline-block;
font-family: sans-serif;
}
.countdown .time{
border-radius: 5px;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
display: inline-block;
text-align: center;
position: relative;
height: 95px;
width: 65px;
-webkit-perspective: 500px;
-moz-perspective: 500px;
-ms-perspective: 500px;
-o-perspective: 500px;
perspective: 500px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.countdown .count{
background: #202020;
color: #f8f8f8;
display: block;
font-size: 2em;
line-height: 94px;
overflow: hidden;
position: absolute;
text-align: center;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
top: 0;
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-transform-style: flat;
-moz-transform-style: flat;
-ms-transform-style: flat;
-o-transform-style: flat;
transform-style: flat;
}
.countdown .count.top {
border-top: 1px solid rgba(255,255,255,0.2);
border-radius: 5px 5px 0 0;
height: 50%;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.countdown .count.bottom {
background-image: linear-gradient(rgba(255,255,255,0.1), transparent);
background-image: -webkit-linear-gradient(rgba(255,255,255,0.1), transparent);
background-image: -moz-linear-gradient(rgba(255,255,255,0.1), transparent);
background-image: -ms-linear-gradient(rgba(255,255,255,0.1), transparent);
background-image: -o-linear-gradient(rgba(255,255,255,0.1), transparent);
border-bottom: 1px solid #000;
border-radius: 0 0 5px 5px;
line-height: 0;
height: 50%;
top: 50%;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.countdown .count.next {
}
.countdown .label {
font-size: normal;
margin-top: 5px;
display: block;
position: absolute;
top: 95px;
width: 100%;
}
/* Animation start */
.countdown .count.curr.top {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
z-index: 3;
}
.countdown .count.next.bottom {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
z-index: 2;
}
/* Animation end */
.countdown [data-flip] .count.curr.top {
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
.countdown [data-flip] .count.next.bottom {
-webkit-transition: all 250ms ease-in-out 250ms;
-moz-transition: all 250ms ease-in-out 250ms;
-ms-transition: all 250ms ease-in-out 250ms;
-o-transition: all 250ms ease-in-out 250ms;
transition: all 250ms ease-in-out 250ms;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
@media screen and (max-width: 48em){
.countdown{
width: 100%;
height: 100px;
}
.countdown .time {
height: 70px;
width: 48px;
}
.countdown .count {
font-size: 1.5em;
line-height: 70px;
}
.countdown .label {
font-size: 0.8em;
top: 72px;
}
}
</style>
<div data-template="countdown">
<div class="time {label}">
<span class="count curr top">{curr}</span>
<span class="count next top">{next}</span>
<span class="count next bottom">{next}</span>
<span class="count curr bottom">{curr}</span>
<span class="label">{label}</span>
</div>
</div>
<script src="./d-util.js"></script>
<script src="./jquery-2.1.4.min.js"></script>
<script src="./jquery.countdown.js"></script>
<script type="text/javascript">
(function(){
var parser = /([0-9]{2})/gi;
var template = document.querySelector('[data-template="countdown"]').innerHTML;
var CountDown = {
labels: ['weeks', 'days', 'hours', 'minutes', 'seconds'],
constructor: function(date, labels){
this.date = date;
if( labels ) this.labels = labels;
this.currDate = '00:00:00:00:00';
this.nextDate = '00:00:00:00:00';
},
// Parse countdown string to an object
strfobj: function(str){
var parsed = str.match(parser);
var obj = {};
this.labels.forEach(function(label, i){
obj[label] = parsed[i];
});
return obj;
},
// Return the time components that diffs
diff: function(obj1, obj2){
var diffList = [];
this.labels.forEach(function(key){
if( obj1[key] !== obj2[key] ){
diffList.push(key);
}
});
return diffList;
},
render: function(container){
this.container = container;
// Build the layout
var initData = this.strfobj(this.currDate);
this.labels.forEach(function(label, i){
var timerElement = template.render({
curr: initData[label],
next: initData[label],
label: label
}).toElement();
this.container.appendChild(timerElement);
}, this);
$(this.container).countdown(this.date, function(event){
var newDate = event.strftime('%w:%d:%H:%M:%S');
var data;
if( newDate !== this.nextDate ){
this.currDate = this.nextDate;
this.nextDate = newDate;
// Setup the data
data = {
'curr': this.strfobj(this.currDate),
'next': this.strfobj(this.nextDate)
};
// Apply the new values to each node that changed
this.diff(data.curr, data.next).forEach(function(label){
var timerElement = this.container.querySelector('.time.' + label);
// Update the node
timerElement.removeAttribute('data-flip');
timerElement.querySelector('.top.curr').innerHTML = data.curr[label];
timerElement.querySelector('.bottom.curr').innerHTML = data.curr[label];
timerElement.querySelector('.top.next').innerHTML = data.next[label];
timerElement.querySelector('.bottom.next').innerHTML = data.next[label];
// Wait for a repaint to then flip
setTimeout(function(){
timerElement.setAttribute('data-flip', true);
}, 50);
}, this);
}
}.bind(this));
}
};
window.CountDown = CountDown;
})();
</script>
<script>
var date = new Date();
date.setFullYear(date.getFullYear() + 1);
var countdown = window.CountDown.create(date);
countdown.render(document.querySelector('.countdown'));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment