Holiday Countdown

Mick in Tutorials on Nov 27, 2019
"Holiday Countdown"
Here's a simple, very cool and yet awesome JavaScript New Year and Christmas Countdowns with falling snow block for your sidebar. Yes, Very simple and extremely easy to use.





The CSS:

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
box-sizing: border-box;
}

.newyear {
background-color: #323975;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Muli', sans-serif;
height: 350px;
overflow: hidden;
margin: 0;
text-align: center;
}

.newyear h1 {
        color: #fff;
        font-size: 20px;
}

.fa-snowflake {
color: #fff;
position: absolute;
top: -20px;
animation: fall linear forwards;
        z-index: 999;
}

@keyframes fall {
to {
transform: translateY(100vh);
}
}

.countdown-container {
display: flex;
}

.time {
display: flex;
font-size: 1.2em;
flex-direction: column;
margin: 0 10px;
}

.time h1 {
margin-bottom: 0;
        color: #fff;
}

.time small {
color: #fff;
}


The HTML:

<div class="newyear"><h1>New Year is Coming!</h1>
 <div class="countdown-container">
<div class="time">
<h1 id="days">00</h1>
<small>days</small>
</div>
<div class="time">
<h1 id="hours">00</h1>
<small>hours</small>
</div>
<div class="time">
<h1 id="minutes">00</h1>
<small>minutes</small>
</div>
<div class="time">
<h1 id="seconds">00</h1>
<small>seconds</small>
</div>
 </div>
</div>


The Script:

const body = document.body;
const endTime = new Date('December 31 2020 23:59:59');
const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hours');
const minutesEl = document.getElementById('minutes');
const secondsEl = document.getElementById('seconds');


setInterval(updateCountdown, 1000)
setInterval(createSnowFlake, 100);


function updateCountdown() {
const startTime = new Date();
const diff = endTime - startTime;
const days = Math.floor(diff / 1000 / 60 / 60 / 24);
const hours = Math.floor(diff / 1000 / 60 / 60) % 24;
const minutes = Math.floor(diff / 1000 / 60) % 60;
const seconds = Math.floor(diff / 1000) % 60;
daysEl.innerHTML = days;
hoursEl.innerHTML = hours < 10 ? '0'+hours : hours;
minutesEl.innerHTML = minutes < 10 ? '0'+minutes : minutes;
secondsEl.innerHTML = seconds < 10 ? '0'+seconds : seconds;
}

function createSnowFlake() {
const snow_flake = document.createElement('i');
snow_flake.classList.add('far');
snow_flake.classList.add('fa-snowflake');
snow_flake.style.width = Math.random() * 10 + 10 + 'px';
snow_flake.style.left = Math.random() * window.innerWidth + 'px';
snow_flake.style.animationDuration = Math.random() * 3 + 2 + 's';
snow_flake.style.opacity = Math.random();

body.appendChild(snow_flake);

setTimeout(() => {
snow_flake.remove();
}, 5000);
}


Now let's add all this into a HTML block and activate:

<style>
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
box-sizing: border-box;
}

.newyear {
background-color: #323975;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Muli', sans-serif;
height: 350px;
overflow: hidden;
margin: 0;
text-align: center;
}

.newyear h1 {
        color: #fff;
        font-size: 20px;
}

.fa-snowflake {
color: #fff;
position: absolute;
top: -20px;
animation: fall linear forwards;
        z-index: 999;
}

@keyframes fall {
to {
transform: translateY(100vh);
}
}

.countdown-container {
display: flex;
}

.time {
display: flex;
font-size: 1.2em;
flex-direction: column;
margin: 0 10px;
}

.time h1 {
margin-bottom: 0;
        color: #fff;
}

.time small {
color: #fff;
}
</style>


<div class="newyear"><h1>New Year is Coming!</h1>
 <div class="countdown-container">
<div class="time">
<h1 id="days">00</h1>
<small>days</small>
</div>
<div class="time">
<h1 id="hours">00</h1>
<small>hours</small>
</div>
<div class="time">
<h1 id="minutes">00</h1>
<small>minutes</small>
</div>
<div class="time">
<h1 id="seconds">00</h1>
<small>seconds</small>
</div>
 </div>
</div>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" />
<script>
const body = document.body;
const endTime = new Date('December 31 2020 23:59:59');
const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hours');
const minutesEl = document.getElementById('minutes');
const secondsEl = document.getElementById('seconds');


setInterval(updateCountdown, 1000)
setInterval(createSnowFlake, 100);


function updateCountdown() {
const startTime = new Date();
const diff = endTime - startTime;
const days = Math.floor(diff / 1000 / 60 / 60 / 24);
const hours = Math.floor(diff / 1000 / 60 / 60) % 24;
const minutes = Math.floor(diff / 1000 / 60) % 60;
const seconds = Math.floor(diff / 1000) % 60;
daysEl.innerHTML = days;
hoursEl.innerHTML = hours < 10 ? '0'+hours : hours;
minutesEl.innerHTML = minutes < 10 ? '0'+minutes : minutes;
secondsEl.innerHTML = seconds < 10 ? '0'+seconds : seconds;
}

function createSnowFlake() {
const snow_flake = document.createElement('i');
snow_flake.classList.add('far');
snow_flake.classList.add('fa-snowflake');
snow_flake.style.width = Math.random() * 10 + 10 + 'px';
snow_flake.style.left = Math.random() * window.innerWidth + 'px';
snow_flake.style.animationDuration = Math.random() * 3 + 2 + 's';
snow_flake.style.opacity = Math.random();

body.appendChild(snow_flake);

setTimeout(() => {
snow_flake.remove();
}, 5000);
}
</script>


Christmas Countdown:




<style>
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
box-sizing: border-box;
}

.xmas {
background-color: #d63031;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Muli', sans-serif;
height: 350px;
overflow: hidden;
margin: 0;
text-align: center;
}

.xmas h1 {
        color: #fff;
        font-size: 20px;
}

.fa-snowflake {
color: #fff;
position: absolute;
top: -20px;
animation: fall linear forwards;
        z-index: 999;
}

@keyframes fall {
to {
transform: translateY(100vh);
}
}

.countdown-container {
display: flex;
}

.time {
display: flex;
font-size: 1.2em;
flex-direction: column;
margin: 0 10px;
}

.time h1 {
margin-bottom: 0;
        color: #fff;
}

.time small {
color: #fff;
}
</style>


<div class="xmas"><h1>Santa is Coming!</h1>
 <div class="countdown-container">
<div class="time">
<h1 id="days">00</h1>
<small>days</small>
</div>
<div class="time">
<h1 id="hours">00</h1>
<small>hours</small>
</div>
<div class="time">
<h1 id="minutes">00</h1>
<small>minutes</small>
</div>
<div class="time">
<h1 id="seconds">00</h1>
<small>seconds</small>
</div>
 </div>
</div>

<script>
const body = document.body;
const endTime = new Date('December 24 2020 23:59:59');
const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hours');
const minutesEl = document.getElementById('minutes');
const secondsEl = document.getElementById('seconds');


setInterval(updateCountdown, 1000)
setInterval(createSnowFlake, 100);


function updateCountdown() {
const startTime = new Date();
const diff = endTime - startTime;
const days = Math.floor(diff / 1000 / 60 / 60 / 24);
const hours = Math.floor(diff / 1000 / 60 / 60) % 24;
const minutes = Math.floor(diff / 1000 / 60) % 60;
const seconds = Math.floor(diff / 1000) % 60;
daysEl.innerHTML = days;
hoursEl.innerHTML = hours < 10 ? '0'+hours : hours;
minutesEl.innerHTML = minutes < 10 ? '0'+minutes : minutes;
secondsEl.innerHTML = seconds < 10 ? '0'+seconds : seconds;
}

function createSnowFlake() {
const snow_flake = document.createElement('i');
snow_flake.classList.add('far');
snow_flake.classList.add('fa-snowflake');
snow_flake.style.width = Math.random() * 10 + 10 + 'px';
snow_flake.style.left = Math.random() * window.innerWidth + 'px';
snow_flake.style.animationDuration = Math.random() * 3 + 2 + 's';
snow_flake.style.opacity = Math.random();

body.appendChild(snow_flake);

setTimeout(() => {
snow_flake.remove();
}, 5000);
}
</script>

Reference: https://codepen.io/FlorinPop17/pen/xxxEqGj


   Tagged with: javascript snow effect js html css 


Mick

Mick G

Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time and has a weakness for Pizza.

 idesignsmf.com

    

0 Comments