Free Forever. Our themes will always be free. Forever. Period.

Holiday Countdown with falling Snow

Mick in Tutorials on Nov 27, 2019


Here's a simple, 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 2019 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 2019 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 2019 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

idesignsmf.com

    

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 Tacos and Pizza.


0 Comments




Latest Discussions

Join the conversation

Our Most Popular Features