Display Falling Snowflakes On Webpage – pure-snow.js

Category: Animation , Javascript | October 27, 2023
Author:hyperstown
Views Total:1,144 views
Official Page:Go to website
Last Update:October 27, 2023
License:MIT

Preview:

Display Falling Snowflakes On Webpage – pure-snow.js

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:

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.

You Might Be Interested In:


Leave a Reply