Display Falling Snowflakes On Webpage – pure-snow.js

Preview:

Description:

pure-snow.js is a JavaScript library that generates any number of CSS-based snowflakes and makes them slowly fall from the top of the screen. Feel free to download and use it to create a truly beautiful winter, Christmas, or holiday season website.

See Also:

• 10 Best Falling Snow Effects Using JavaScript & CSS

How to use it:

1. Include the pure-snow.js library in your project.

<script src="./pure-snow.js" defer></script>

2. Create a DIV element for the snowfall effect and specify the number of snowflakes to generate.

<div id="snow" data-count="200"></div>

3. Create your own snowflake shapes & patterns.

.snowflake {
  position: absolute;
  width: 10px;
  height: 10px;
  background: linear-gradient(white, white);
  border-radius: 50%;
  filter: drop-shadow(0 0 10px white);
}

Changelog:

v2.1.0 (10/27/2023)

• Use data-count attribute to set snow count
• Add support for window resizing.