A countdown to a specific date that animates up from 0 and then starts the countdown.
A Pen by Nikita Dudnik on CodePen.
A countdown to a specific date that animates up from 0 and then starts the countdown.
A Pen by Nikita Dudnik on CodePen.
<span id="container"> | |
<div id="title">COUNTDOWN TO TRYSIL</div> | |
<ul id="countdown"> | |
<li id="days"> | |
<div class="number">00</div> | |
<div class="label">Days</div> | |
</li> | |
<li id="hours"> | |
<div class="number">00</div> | |
<div class="label">Hours</div> | |
</li> | |
<li id="minutes"> | |
<div class="number">00</div> | |
<div class="label">Minutes</div> | |
</li> | |
</ul> | |
</span> |
/* -------------------------- | |
* GLOBAL VARS | |
* -------------------------- */ | |
// The date you want to count down to | |
var targetDate = new Date("2016/12/25 00:00:00"); | |
// Other date related variables | |
var days; | |
var hrs; | |
var min; | |
var sec; | |
/* -------------------------- | |
* ON DOCUMENT LOAD | |
* -------------------------- */ | |
$(function() { | |
// Calculate time until launch date | |
timeToLaunch(); | |
// Transition the current countdown from 0 | |
numberTransition('#days .number', days, 1000, 'easeOutQuad'); | |
numberTransition('#hours .number', hrs, 1000, 'easeOutQuad'); | |
numberTransition('#minutes .number', min, 1000, 'easeOutQuad'); | |
numberTransition('#seconds .number', sec, 1000, 'easeOutQuad'); | |
// Begin Countdown | |
setTimeout(countDownTimer,1001); | |
}); | |
/* -------------------------- | |
* FIGURE OUT THE AMOUNT OF | |
TIME LEFT BEFORE LAUNCH | |
* -------------------------- */ | |
function timeToLaunch(){ | |
// Get the current date | |
var currentDate = new Date(); | |
// Find the difference between dates | |
var diff = (currentDate - targetDate)/1000; | |
var diff = Math.abs(Math.floor(diff)); | |
// Check number of days until target | |
days = Math.floor(diff/(24*60*60)); | |
sec = diff - days * 24*60*60; | |
// Check number of hours until target | |
hrs = Math.floor(sec/(60*60)); | |
sec = sec - hrs * 60*60; | |
// Check number of minutes until target | |
min = Math.floor(sec/(60)); | |
sec = sec - min * 60; | |
} | |
/* -------------------------- | |
* DISPLAY THE CURRENT | |
COUNT TO LAUNCH | |
* -------------------------- */ | |
function countDownTimer(){ | |
// Figure out the time to launch | |
timeToLaunch(); | |
// Write to countdown component | |
$( "#days .number" ).text(days); | |
$( "#hours .number" ).text(hrs); | |
$( "#minutes .number" ).text(min); | |
$( "#seconds .number" ).text(sec); | |
// Repeat the check every second | |
setTimeout(countDownTimer,1000); | |
} | |
/* -------------------------- | |
* TRANSITION NUMBERS FROM 0 | |
TO CURRENT TIME UNTIL LAUNCH | |
* -------------------------- */ | |
function numberTransition(id, endPoint, transitionDuration, transitionEase){ | |
// Transition numbers from 0 to the final number | |
$({numberCount: $(id).text()}).animate({numberCount: endPoint}, { | |
duration: transitionDuration, | |
easing:transitionEase, | |
step: function() { | |
$(id).text(Math.floor(this.numberCount)); | |
}, | |
complete: function() { | |
$(id).text(this.numberCount); | |
} | |
}); | |
}; |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> |
html { | |
box-sizing: border-box; | |
} | |
*, *:before, *:after { | |
box-sizing: inherit; | |
} | |
body, html { | |
height: 100%; | |
display: grid; | |
background-color: #000; | |
background: url(https://www.trysil.com/contentassets/eec237e129724d59ae77a9aed343412d/trysil-sentrum.jpg); | |
} | |
span { /* thing to center */ | |
margin: auto; | |
} | |
#title { | |
font-family: 'Arial Narrow', Arial, sans-serif; | |
font-size: 48px; | |
text-align: center; | |
color: #fff; | |
} | |
ul#countdown { | |
position: relative; | |
margin: 0 auto; | |
padding: 15px 0 20px 0; | |
color: #fff; | |
overflow: hidden; | |
font-family: 'Arial Narrow', Arial, sans-serif; | |
li { | |
margin: 0 -3px 0 0; | |
padding: 0; | |
display: inline-block; | |
width: 33%; | |
font-size: 72px; | |
font-size: 6vw; | |
text-align: center; | |
.label { | |
color: #fff; | |
font-size: 18px; | |
font-size: 1.5vw; | |
} | |
} | |
} |