Animated Snowfall Effect In Pure JavaScript

Category: Animation , Javascript | December 7, 2021
Author:hyperstown
Views Total:4,555 views
Official Page:Go to website
Last Update:December 7, 2021
License:MIT

Preview:

Animated Snowfall Effect In Pure JavaScript

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:

12/07/2021

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

09/16/2021

  • Beautify code. No core changed.

You Might Be Interested In:


2 thoughts on “Animated Snowfall Effect In Pure JavaScript

  1. terra

    Unfortunately, snowflakes animate dramatically slowly, almost in time.
    In chrome in devtools it shows frame drops and the animation even drops to 11fps 🙂

    Reply

Leave a Reply