Animated Snowfall Effect In Pure JavaScript

Preview:

Description:

An animated snowfall effect built with plain JavaScript and CSS animations.

How to use it:

1. Load the PureSnow.js JavaScript in the document.

<script src="./PureSnow.js"></script>

2. Create an empty DIV element that serves as the container for the snowfall effect.

<div id="snow"></div>

3. Apply your own styles to the snowflakes.

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

4. Toggle the snowfall effect.

toggleSnow()

5. Specify the number of snowflakes to generate. Default: 200.

let total = 300;

Changelog:

11/26/2022

• performance improvements

12/07/2021

• add support for unfixed page height
• dynamic snow fall duration
• small fixes

09/16/2021

• Beautify code. No core changed.