Creating a Snowfall Effect with CSS and JavaScript

December 10, 2022 • 5 min read

Introduction
The CSS
The JavaScript
Using the Effect on Your Page
Conclusion

Introduction

Are you looking to add a little winter wonder to your website? In this blog post, we’ll be discussing how to create a snowfall effect using CSS and JavaScript. This simple yet effective effect is a great way to add a fun and festive touch to your site.

Whether you’re a beginner or an experienced developer, you’ll find this tutorial easy to follow. We’ll provide step-by-step instructions on how to create a snowfall effect using CSS and JavaScript, so you’ll be able to add some seasonal cheer to your site in no time.

So grab your favorite hot drink, get comfortable, and let’s get started! With a little bit of code, you can bring the magic of a winter wonderland to your website.

The CSS

First, we need need to write some styles for out container element. This element will be used to hold all of the snowflakes that we create. We will apply the .snow class to this element.

.snow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 95%;
  pointer-events: none;
  z-index: 999;
  overflow: visible;
}

Then, we will create the .snowflake class, which will be applied to each individual snowflake. This class will handle the animation of the snowflakes falling, as well as giving them a slight side-to-side movement to make them look more realistic.

.snowflake {
  opacity: 0;
  animation:
    fall 12s ease-out infinite,
    move 4s ease-in-out infinite,
    fade-in 1s ease-in forwards;
}

In the code above, we have defined three different animations for the snowflakes:

fall: This animation moves the snowflakes from the top of the page to the bottom, simulating them falling.
move: This animation gives the snowflakes a slight side-to-side movement, making them look more realistic.
fade-in: This animation fades the snowflakes in when they first appear on the screen.

Next, we will define the @keyframes for each of these animations:

@keyframes fall {
  from {
    top: 0;
  }
  to {
    top: 100%;
  }
}

@keyframes move {
  0% {
    transform: translateX(-8px);
  }
  50% {
    transform: translateX(8px);
  }
  100% {
    transform: translateX(-8px);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

With these keyframes defined, our snowflakes will now fall and move realistically on the page.

The JavaScript

Next, we will use JavaScript to create the snowflakes and add them to the page.

First, we will define some variables that we will use throughout our script:

// snowflake characters
const snow = ['❄', '❅', '❆'];
// snowflake colors
const colors = ['#aaa', '#bbb', '#ccc', '#ddd', '#eee'];
// number of snowflakes
const flakes = 24;

Then we need to grab a reference to the div element on our page that has the .snow class applied to it. We will store this reference in a variable called container.

// snowflake container
const container = document.querySelector('.snow');

Next, we will create a variable called containerWidth that stores the width of the container element. This will be used later when positioning the snowflakes on the page.

// snowflake container width
const containerWidth = container?.clientWidth;

We will also create an empty array called snowflakes that will be used to store references to each of the snowflake elements that we create.

// snowflake array
const snowflakes = [];

With these variables in place, we can now start creating the snowflakes and adding them to the page. To do this, we will use a for loop that will iterate flakes number of times.

// create snowflakes
for (let i = 0; i < flakes; i++) {
  // create the snowflake element
  const flake = document.createElement('div');
  // set the snowflake character
  flake.innerHTML = snow[Math.floor(Math.random() * snow.length)];
  // add the common snowflake styles
  flake.classList.add('snowflake');
  // set the unique snowflake styles
  flake.style.position = 'absolute';
  flake.style.left = `${Math.random() * containerWidth}px`;
  flake.style.fontSize = `${Math.floor(Math.random() * 30) + 10}px`;
  flake.style.color = colors[Math.floor(Math.random() * colors.length)];
  flake.style.animationDelay = `${Math.random() * 12}s`;
  container.appendChild(flake);
  snowflakes.push(flake);
}

In the code above, we are creating a new div element for each snowflake and setting its content to a random snowflake character from the snow array. We are also applying the .snowflake class to the element, as well as setting a number of unique styles for each snowflake. These styles include the snowflake’s position, font size, and color.

Once we have created a snowflake element, we add it to the page by appending it to the container element. We also add a reference to the snowflake element to the snowflakes array.

The final code looks like this:

const snow = ['❄', '❅', '❆'];
const colors = ['#aaa', '#bbb', '#ccc', '#ddd', '#eee'];
const flakes = 16;
const container = document.querySelector('.snow');
const containerWidth = container?.clientWidth;
const snowflakes = [];
for (let i = 0; i < flakes; i++) {
  const flake = document.createElement('div');
  flake.innerHTML = snow[Math.floor(Math.random() * snow.length)];
  flake.classList.add('snowflake');
  flake.style.position = 'absolute';
  flake.style.left = `${Math.random() * containerWidth}px`;
  flake.style.fontSize = `${Math.floor(Math.random() * 30) + 10}px`;
  flake.style.color = colors[Math.floor(Math.random() * colors.length)];
  flake.style.animationDelay = `${Math.random() * 12}s`;
  container.appendChild(flake);
  snowflakes.push(flake);
}

Using the Effect on Your Page

To use the snowfall effect on your page, you will need to add the CSS and JavaScript code above to your stylesheet and script file, respectively.

Once you have done that, you can add the following HTML to your page where you want the snowfall effect to appear:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <-- css -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <-- apply .snow contaiener class here -->
    <div class="snow"></div>
    <-- js -->
    <script src="snow.js"></script>
  </body>
</html>

Conclusion

In this blog post, we have gone over how to create a snowfall effect using CSS and JavaScript. We started by creating the necessary CSS styles to animate the snowflakes, and then used JavaScript to create the snowflakes and add them to the page.

With just a few lines of code, you can add a fun and festive touch to your website this holiday season. Happy coding!