A Pen by Anya Melnyk on CodePen.
Created
December 28, 2018 07:37
-
-
Save iam-pankaj/b33a8253340c2ee9f1e35863ce72c499 to your computer and use it in GitHub Desktop.
New Year's countdown
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<h1 class="intro"><span>2019</span> IS COMING IN</h1> | |
<div class="countdown-wrapper"> | |
<div class="days time-el"> | |
<output id="days"></output> | |
<label for="days">DAY(S)</label> | |
</div> | |
<div class="hours time-el"> | |
<output id="hours"></output> | |
<label for="hours">HOUR(S)</label> | |
</div> | |
<div class="minutes time-el"> | |
<output id="minutes"></output> | |
<label for="minutes">MINUTE(S)</label> | |
</div> | |
<div class="seconds time-el"> | |
<output id="seconds"></output> | |
<label for="seconds">SECOND(S)</label> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let targetTime = new Date("Jan 1, 2019"); | |
let oneSecond = 1000; | |
let oneMinute = oneSecond * 60; | |
let oneHour = oneMinute * 60; | |
let oneDay = oneHour * 24; | |
let $daysEl = $(".time-el #days"); | |
let $hoursEl = $(".time-el #hours"); | |
let $minutesEl = $(".time-el #minutes"); | |
let $secondsEl = $(".time-el #seconds"); | |
function startCountDown() { | |
updateTick(); | |
let timeInterval = setInterval(updateTick, oneSecond); | |
function updateTick() { | |
let timeLeft = Date.parse(targetTime) - Date.parse(new Date()); | |
let spanContent = ` | |
<div class="digit"> | |
<div class="next"> | |
<span class="top"><span class="inner">$1</span></span> | |
<span class="bottom"><span class="inner">$1</span></span> | |
</div> | |
<div class="current"> | |
<span class="top"><span class="inner">$1</span></span> | |
<span class="bottom"><span class="inner">$1</span></span> | |
</div> | |
</div>`; | |
$daysEl.html(Math.floor(timeLeft / oneDay)).html((i, digit) => digit.replace(/(\d)/g, spanContent)); | |
$hoursEl.html(("0" + Math.floor((timeLeft % oneDay) / oneHour)).slice(-2)).html((i, digit) => digit.replace(/(\d)/g, spanContent)); | |
$minutesEl.html(("0" + Math.floor((timeLeft % oneHour) / oneMinute)).slice(-2)).html((i, digit) => digit.replace(/(\d)/g, spanContent)); | |
$secondsEl.html(("0" + Math.floor((timeLeft % oneMinute) / oneSecond)).slice(-2)).html((i, digit) => digit.replace(/(\d)/g, spanContent)); | |
// let tl = new TimelineMax() | |
// .to('.current .top', 0.5, {rotationX: -90, ease: Power0.easeNone}, 0) | |
// .fromTo('.current .bottom', 0.5, {rotationX: 90}, {rotationX: 0, ease: Power0.easeNone}, 0.5); | |
if (timeLeft <= 0) clearInterval(timeInterval); | |
} | |
} | |
function flip() { | |
let timeLeft = Date.parse(targetTime) - Date.parse(new Date()); | |
let tl = TweenMax.to({}, 1, {repeat: -1, onRepeat: function() { console.log(Date.parse(targetTime) - Date.parse(new Date())); }}); | |
} | |
$(function() { | |
startCountDown(); | |
// flip(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url('https://fonts.googleapis.com/css?family=Limelight|Mada'); | |
*, | |
*:before, | |
*:after { | |
box-sizing: border-box; | |
margin: 0; | |
padding: 0; | |
} | |
body { | |
background: #1a121f; | |
} | |
.container { | |
width: 750px; | |
text-align: center; | |
position: absolute; | |
transform: translate(-50%, -50%); | |
top: 50%; | |
left: 50%; | |
font-family: 'Mada', sans-serif; | |
} | |
.intro { | |
margin: 5% auto; | |
color: #9e8686; | |
letter-spacing: 1px; | |
word-spacing: 12px; | |
} | |
.intro span { | |
font-size: 40px; | |
font-family: 'Limelight', cursive; | |
} | |
.countdown-wrapper { | |
display: flex; | |
justify-content: space-around; | |
margin: 5% auto; | |
color: #7e8c6a; | |
} | |
label, | |
output, | |
.time-el span { | |
display: block; | |
} | |
.time-el { | |
position: relative; | |
margin-right: 20px; | |
} | |
.time-el:not(:last-child):after { | |
content: ":"; | |
position: absolute; | |
right: -36px; | |
top: 28%; | |
font-size: 30px; | |
} | |
.time-el .digit{ | |
position: relative; | |
width: 70px; | |
height: 90px; | |
display: inline-block; | |
font-size: 70px; | |
line-height: 90px; | |
font-family: 'Limelight', cursive; | |
perspective: 120px; | |
} | |
.inner { | |
height: 200%; | |
width: 100%; | |
position: absolute; | |
} | |
.top .inner { | |
top: 0; | |
} | |
.bottom .inner { | |
bottom: 0; | |
} | |
.time-el .top, .time-el .bottom { | |
position: absolute; | |
left: 0; | |
height: 50%; | |
width: 100%; | |
overflow: hidden; | |
/* background: linear-gradient(to bottom, #543243 10%, #461f32 50%, #543243 90%); */ | |
} | |
.time-el .top { | |
top: 0; | |
transform-origin: 50% 100%; | |
color: #738263; | |
background: linear-gradient(300deg, #331926 50%, #542e40); | |
border-radius: 6px 6px 0 0; | |
z-index: 1; | |
backface-visibility: hidden; | |
} | |
.time-el .bottom { | |
bottom: 0; | |
transform-origin: 50% 0%; | |
background: linear-gradient(340deg, #542e40, #331926 40%); | |
border-radius: 0 0 6px 6px; | |
} | |
.time-el label{ | |
font-size: 10px; | |
letter-spacing: 1px; | |
color: #9e8686; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment