How to create snowfall animation using css and JavaScript

How to create snowfall animation using css and JavaScript

In this post we will give you information about How to create snowfall animation using css and JavaScript. Hear we will give you detail about How to create snowfall animation using css and JavaScriptAnd how to use it also give you demo for it if it is necessary.

we are going to learn about how to create a snowfall animation by using CSS and JavaScript.

Codepen demo

Here is our snowfall animation demo.

Getting started

First, we need to create an html markup that contains a div tag and an i tag with snowflake icon is added.

The snowflake icon we are using here is taken from weather icons package

<div >  <i ></i></div>


Let’s add the CSS styling to the container and the flake classes.

body {  font-family: sans-serif;  background: #070606e8;  background-image: url(  /wp-content/uploads/2016/02/day2night-after-photoshop.jpg);  background-repeat: no-repeat;  background-size: cover;  background-position: center;}.container {  height: 100vh;  overflow: hidden;}.flake {  color: rgb(247, 252, 243);  font-size: 2rem;  padding: 1rem;  animation: fall 2s linear forwards infinite;  animation-delay: 1s;}/* animating snowflake in Y-axis  */@keyframes fall {  from {    transform: translateY(-10vh);  }  to {    transform: translateY(100vh);  }}

We are animating the snowflake with fall animation infinitely.

See also  Generics in Swift explained with code examples - onlinecode

But currently, if we see the output there is only a single snowflake is falling.


Now, we are using JavaScript to create multiple snowflakes dynamically and added it to the div container.

const flake = document.querySelector(".flake");const container = document.querySelector(".container");function createFlake() {  // cloning the flake node  const clone = flake.cloneNode(true);  // creating left padding = Math.random() * 10 + "px";  // animation duration between 3-5 = Math.random() * 5 + 3 + "s"; = Math.random() * 1;  container.append(clone); // adding clone flake to container}// to create more flakes decrease 100const s = setInterval(createFlake, 100);setTimeout(() => {  clearInterval(s);}, 3000); // flake creation stops after 3000 milliseconds or 3s

In the above code, first we accessed two dom nodes (flake,container) using document.querySelector().

See also  How to concatenate two strings in JavaScript

The createFlake() function is used to create a new snowflake and append it to the div container.

setInterval method runs the createFlake() function on every 100 milliseconds.

At the final, we are using the setTimeout() method to stop the snowflake creation after 3000 milliseconds or 3s.

Find me on twitter @saigowthamr


If you want to create snowflakes with multiple colors you can use this code inside createFlake()function.

const randomC = Math.random() * 200;const randomA = Math.random() * 200;const randomB = Math.random() * 56; = 'rgb(${randomA + 256},${randomB + 200},${randomC + 100})';


Hope this code and post will helped you for implement How to create snowfall animation using css and JavaScript. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

See also  CSS Create Middle Border Line After Text Example - Technology

For More Info See :: laravel And github

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US