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

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

  Connect with us:

     

  Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.

  Receive our monthly newsletter right in your inbox.
Commitment issues? Unsubscribe at any time.

Get 100% complete access to our entire collection and find out why 11,211 SMF owners prefer our themes



0 Comments







  Find the right theme for you. Browse through our gallery of expertly-crafted free SMF themes to find the perfect one for your needs.