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 important component containing the content material of our web page and a snow-container component that can show the snow.

2. Season’s Styling with CSS

On this demo, our important content material has a gradient background color to provide it an evening sky impact. We obtain this utilizing the CSS linear-gradient operate. 

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.

Right here’s what our banner appears like now:

We’ll additionally use CSS to deal with the animation of every snow component. Every snowflake may have two animations: a fall animation to deal with the snowflake shifting from the highest to the underside of the display screen and a sway animation to deal with shifting the snowflake slowly facet to facet.

We’ll additionally type our snow container and the snow component we’ll be creating in JavaScript.

The animation property on this demo takes three values:

• title: That is the worth of the animation we created beneath keyframes.
• timing: This determines how the animation progresses.
• iteration: That is the variety of instances 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 component:

For our snowflake content material, we’ll be utilizing HTML symbols (❄ ❅ ❆):

We’ll create a snowContent array to include the image codes

With a view 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.ground() features to deal with producing the random values for our snow components.

Now we are able to create a operate to generate a random type for every snowflake. We’ll generate a random place, measurement and animation length.

For our length and measurement 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 high fixed, we assign a detrimental worth so the snowflakes begins from any share above the seen display screen.

Subsequent, we’ll deal with appending the snowflakes to the snow container.

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 operate as soon as our web page hundreds utilizing the load occasion listener.

And it’s snowing! Click on Rerun to see the animated snow:

Eradicating Snowflakes

We will additionally select so as to add a operate to take away the snowflakes.

On this operate, 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() technique.

We will then select to name this operate nevertheless we would like. We will take away the snow when the person clicks wherever on the web page:

Or we are able to embody it in setTimeout() operate so it disappears after a sure period of time:

Switching Out the Snowflakes

Since we’ve constructed this from scratch, we are able to additionally replace the component 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!