On this tutorial, we’re going to implement an animated snow impact on a webpage utilizing CSS and vanilla JavaScript, simply in time for the vacation season.
‘Tis the season to be jolly so let it snow, let it snow, let it snow!
1. Markup with Vacation HTML
For our markup, we’ll have two major containers: a primary aspect containing the content material of our web page and a snow-container aspect that can show the snow.
<primary> <h1>Completely satisfied Holidays!</h1> </primary> <div id="snow-container"> </div>
2. Season’s Styling with CSS
On this demo, our primary content material has a gradient background color to provide it an evening sky impact. We obtain this utilizing the CSS linear-gradient perform.
For simplicity, let’s say we’re constructing this in CodePen, so the markup goes within the HTML tab, the kinds within the CSS tab, and so forth.
primary {
background: linear-gradient(to backside, #2d91c2 0%, #1e528e 100%);
show: flex;
align-items: heart;
justify-content: heart;
font-family: "Pacifico", cursive;
peak: 100vh;
padding: 20px;
text-align: heart;
}
h1 {
shade: white;
}
Right here’s what our banner seems to be like now:
We’ll additionally use CSS to deal with the animation of every snow aspect. Every snowflake may have two animations: a fall animation to deal with the snowflake transferring from the highest to the underside of the display and a sway animation to deal with transferring the snowflake slowly aspect to aspect.
@keyframes fall {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
prime: 100vh;
opacity: 1;
}
}
@keyframes sway {
0% {
margin-left: 0;
}
25% {
margin-left: 50px;
}
50% {
margin-left: -50px;
}
75% {
margin-left: 50px;
}
100% {
margin-left: 0;
}
}
We’ll additionally model our snow container and the snow aspect we’ll be creating in JavaScript.
#snow-container {
peak: 100vh;
overflow: hidden;
place: absolute;
prime: 0;
transition: opacity 500ms;
width: 100%;
}
.snow {
animation: fall ease-in infinite, sway ease-in-out infinite;
shade: skyblue;
place: absolute;
}
The animation property on this demo takes three values:
- identify: That is the worth of the animation we created beneath keyframes.
- timing: This determines how the animation progresses.
- iteration: That is the variety of occasions the animation occurs. We use infinite to always repeat the animation of the snowflakes.
3. Fa la la la la Performance ♬
Now we are able to work on the enjoyable half: making it snow! First, within the JS tab in CodePen, let’s assign a worth to our container aspect:
const snowContainer = doc.getElementById("snow-container");
For our snowflake content material, we’ll be utilizing HTML symbols (❄ ❅ ❆):
We’ll create a snowContent array to include the image codes
const snowContent = ['❄', '❅', '❆']
With the intention to create a falling snow impact, we’ll must randomise the looks and animation of every snowflake.
We’ll use the Math.random() and Math.flooring() features to deal with producing the random values for our snow parts.
const random = (num) => {
return Math.flooring(Math.random() * num);
}
Now we are able to create a perform to generate a random model for every snowflake. We’ll generate a random place, dimension and animation length.
const getRandomStyles = () => {
const prime = random(100);
const left = random(100);
const dur = random(10) + 10;
const dimension = random(25) + 25;
return `
prime: -${prime}%;
left: ${left}%;
font-size: ${dimension}px;
animation-duration: ${dur}s;
`;
}
For our length and dimension fixed, we add a hard and fast quantity worth to make sure the random generated quantity has a minimal worth of the quantity being added (i.e. the bottom quantity for the animation length of any snowflake is 10s)
For our prime fixed, we assign a damaging worth so the snowflakes begins from any share above the seen display.
Subsequent, we’ll deal with appending the snowflakes to the snow container.
const createSnow = (num) => {
for (var i = num; i > 0; i--) {
var snow = doc.createElement("div");
snow.className = "snow";
snow.model.cssText = getRandomStyles();
snow.innerHTML = snowContent[random(2)]
snowContainer.append(snow);
}
}
On this demo, we use a for loop to create a hard and fast variety of snowflakes and append them to the container. We additionally randomly assign the innerHTML as any of the values in our snowContent array.
Then, we’ll name the createSnow perform as soon as our web page masses utilizing the load occasion listener.
window.addEventListener("load", () => {
createSnow(30)
});
And it’s snowing! Click on Rerun to see the animated snow:
Eradicating Snowflakes
We are able to additionally select so as to add a perform to take away the snowflakes.
const removeSnow = () => {
snowContainer.model.opacity = "0";
setTimeout(() => {
snowContainer.take away()
}, 500)
}
On this perform, we assign our snowContainer an opacity of 0 to permit it fade out easily after which, after half a second, we take away the container utilizing the .take away() methodology.
We are able to then select to name this perform nevertheless we would like. We are able to take away the snow when the consumer clicks wherever on the web page:
window.addEventListener("click on", () => {
removeSnow()
});
Or we are able to embrace it in setTimeout() perform so it disappears after a sure period of time:
window.addEventListener("load", () => {
createSnow(30)
setTimeout(removeSnow, 10000)
});
Switching Out the Snowflakes
Since we’ve constructed this from scratch, we are able to additionally replace the aspect content material and animation to create different enjoyable results, like floating balloons:
and even animated Nyan Cat:
I hope you loved this animated snow tutorial, and it’s made you are feeling good and festive!
