A couple of days ago I created this Falling Snow Effect for day #031 in the #100Days100Projects Challenge and in this article I’m going to show you how easy it is to create such an effect using only vanilla JavaScript and a little bit of CSS.
You can see the effect here:
https://codepen.io/FlorinPop17/pen/xxxEqGj
Before we write any code, let’s see what’s the logic behind it…
Basically we are going to dynamically create a snow_flake DOM element which will be inserted in the body tag and it’s going to be positioned absolute on top of the window by offsetting the top position. After that, we will add a little bit of animation to make it fall down to the bottom.
The JavaScript
We need to create a function that will add a snow_flake to the DOM and it should have all the styling that we want to be randomized:
- width - to have different sizes
- left positioning - in order to start falling at a different location
- animationDuration - to randomize the speed at which falls
- opacity - to add a 3D effect to it (kinda)
Also, we are going to use FontAwesome to get the snow flake icon.
All the other properties that we need but are static we will add in the CSS part later.
(Below I added the entire function and I explained every line of code via comments)
function createSnowFlake() {
// Creating the <i> tag
const snow_flake = document.createElement('i');
// Adding the required classes for the FontAwesome icon to show up
snow_flake.classList.add('far');
snow_flake.classList.add('fa-snowflake');
// Randomly generate the width to be between 10 and 20 px
snow_flake.style.width = Math.random() * 10 + 10 + 'px';
// Randomly generate the left position to be between 0 and the innerWidth of the screen
snow_flake.style.left = Math.random() * window.innerWidth + 'px';
// Randomly generate the animationDuration - between 2 and 5 seconds
snow_flake.style.animationDuration = Math.random() * 3 + 2 + 's';
// Randomly add an opacity - between 0 and 1
snow_flake.style.opacity = Math.random();
// Add the newly created <i> tag inside the <body> tag
body.appendChild(snow_flake);
// Set a timeout to remove the snow_flake from the DOM after 5 seconds
// as we don't want it to overload the page
setTimeout(() => {
snow_flake.remove();
}, 5000);
}
And now that we have this function, we are going to call it inside a setInterval to run 10 times per second (100ms):
setInterval(createSnowFlake, 100);
The CSS
As for the CSS we are setting the static properties plus the animation which is set to forwards as we want the snow flake to stay at the bottom after the animation ends (105vh - viewport height).
.fa-snowflake {
color: #fff;
position: absolute;
top: -20px;
animation: fall linear forwards;
}
@keyframes fall {
to {
transform: translateY(105vh);
}
}
And finally, let’s give the body a background-color in order to be able to see the white snowflakes and an overflow: hidden to make sure that we don’t have a scrollbar when the snowflakes reach the bottom:
body {
background-color: #323975;
overflow: hidden;
}
Conclusion
Easy-peasy, right? 😄
I hope you enjoyed this little tutorial. Let me know over on Twitter @florinpop1705.
Happy Coding! 😇