Skip to content

Instantly share code, notes, and snippets.

@arguiot

arguiot/countdown-new-year-s-eve.markdown

Last active December 31, 2017 11:50
Show Gist options
  • Save arguiot/11a19bb368255265c8afff0a7bb16bca to your computer and use it in GitHub Desktop.
Save arguiot/11a19bb368255265c8afff0a7bb16bca to your computer and use it in GitHub Desktop.
Download ZIP
Countdown - New Year's Eve
Raw
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Countdown - New Year's Eve</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="city"></div>
<div class="cloud"></div>
<div class="cloud2"></div>
<div class="year">2018</div>
<div class="counter">
<div class="h" var="h"></div>:
<div class="m" var="m"></div>:
<div class="s" var="s"></div>
</div>
<canvas id="canvas"></canvas>
<script src='https://unpkg.com/display.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
const $ = new DisplayJS(window);
const to = new Date("Jan 1 2018").getTime();
var h, m, s;
function n(n){
var ret = n > 9 ? "" + n: "0" + n;
ret = ret != 60 ? ret : "00"
return ret;
}
$.hide("#canvas")
$.dynamic(() => {
var now = new Date().getTime();
var distance = to - now;
h = n(Math.floor(distance / (1000 * 60 * 60)));
m = n(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)));
s = n(parseFloat(distance % (1000 * 60) / 1000).toFixed(2))
if (distance < 0) {
$.html(".counter", "Happy New Year 🎉!")
$.show("#canvas")
} else {
$.var()
}
}, 1000/60)
// canvas
var canvas = $.s('#canvas')[0];
canvas.width = window.innerWidth
canvas.height = window.innerHeight
var ctx = canvas.getContext('2d');
// resize
window.addEventListener("resize", function() {
canvas.width = window.innerWidth
canvas.height = window.innerHeight
ctx.clearRect(0, 0, canvas.width, canvas.height);
})
// init
ctx.clearRect(0, 0, canvas.width, canvas.height);
// objects
var listFire = [];
var listFirework = [];
var fireNumber = 10;
var center = { x: canvas.width / 2, y: canvas.height / 2 };
var range = 100;
for (var i = 0; i < fireNumber; i++) {
var fire = {
x: Math.random() * range / 2 - range / 4 + center.x,
y: Math.random() * range * 2 + canvas.height,
size: Math.random() + 0.5,
fill: '#fd1',
vx: Math.random() - 0.5,
vy: -(Math.random() + 4),
ax: Math.random() * 0.02 - 0.01,
far: Math.random() * range + (center.y - range)
};
fire.base = {
x: fire.x,
y: fire.y,
vx: fire.vx
};
//
listFire.push(fire);
}
function randColor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var color = 'rgb($r, $g, $b)';
color = color.replace('$r', r);
color = color.replace('$g', g);
color = color.replace('$b', b);
return color;
}
(function loop() {
requestAnimationFrame(loop);
update();
draw();
})();
function update() {
for (var i = 0; i < listFire.length; i++) {
var fire = listFire[i];
//
if (fire.y <= fire.far) {
// case add firework
var color = randColor();
for (var i = 0; i < fireNumber * 5; i++) {
var firework = {
x: fire.x,
y: fire.y,
size: Math.random() + 1.5,
fill: color,
vx: Math.random() * 5 - 2.5,
vy: Math.random() * -5 + 1.5,
ay: 0.05,
alpha: 1,
life: Math.round(Math.random() * range / 2) + range / 2
};
firework.base = {
life: firework.life,
size: firework.size
};
listFirework.push(firework);
}
// reset
fire.y = fire.base.y;
fire.x = fire.base.x;
fire.vx = fire.base.vx;
fire.ax = Math.random() * 0.02 - 0.01;
}
//
fire.x += fire.vx;
fire.y += fire.vy;
fire.vx += fire.ax;
}
for (var i = listFirework.length - 1; i >= 0; i--) {
var firework = listFirework[i];
if (firework) {
firework.x += firework.vx;
firework.y += firework.vy;
firework.vy += firework.ay;
firework.alpha = firework.life / firework.base.life;
firework.size = firework.alpha * firework.base.size;
firework.alpha = firework.alpha > 0.6 ? 1 : firework.alpha;
//
firework.life--;
if (firework.life <= 0) {
listFirework.splice(i, 1);
}
}
}
}
function draw() {
// clear
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 0.18;
ctx.clearRect(0, 0, canvas.width, canvas.height);
// re-draw
ctx.globalCompositeOperation = 'screen';
ctx.globalAlpha = 1;
for (var i = 0; i < listFire.length; i++) {
var fire = listFire[i];
ctx.beginPath();
ctx.arc(fire.x, fire.y, fire.size, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = fire.fill;
ctx.fill();
}
for (var i = 0; i < listFirework.length; i++) {
var firework = listFirework[i];
ctx.globalAlpha = firework.alpha;
ctx.beginPath();
ctx.arc(firework.x, firework.y, firework.size, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = firework.fill;
ctx.fill();
}
}
Raw
scripts
<script src="https://unpkg.com/display.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
Raw
style.css
@font-face {
font-family: 'Nexa'; /*a name to be used later*/
src: url('https://cdn.rawgit.com/arguiot/lite.the-scientist.fr/c3ea19d5/assets/fonts/nexa/Nexa%20Bold.otf'); /*URL to font*/
}
body {
background: darkblue;
overflow: hidden;
font-family: 'Nexa'
}
.cloud {
background: mediumblue;
opacity: 0.5;
width: 200px;
height: 100px;
border-radius: 100px;
position: absolute;
top: 20vh;
animation-duration: 10s;
animation-name: move;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.cloud2 {
background: mediumblue;
opacity: 0.5;
width: 200px;
height: 100px;
border-radius: 100px;
position: absolute;
top: 50vh;
animation-duration: 15s;
animation-name: move2;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes move {
from {
left: -200px;
}
to {
left: 100vw;
}
}
@keyframes move2 {
from {
right: -200px;
}
to {
right: 100vw;
}
}
.city {
position: absolute;
bottom: 10px;
width: 100vw;
height: 200px;
background: url("https://cdn.rawgit.com/arguiot/a0f0b939629d55daa38119961a95907c/raw/03948ad89d52d000da3ef11487b8519aac7f70a6/skyline-1751179.svg");
background-size: cover;
background-position: center;
transform: scale(1.2);
}
.year {
width: 100vw;
height: 500px;
text-align: center;
line-height: 500px;
font-size: 3em;
color: white;
}
.counter {
position: absolute;
top: 0;
left: -40px;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 3.5em;
color: white;
}
.counter > * {
width: 80px;
text-align: center;
}
#canvas {
position: absolute;
top: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment