Animated Snowfall Effect In Pure JavaScript

Category: Animation , Javascript | September 16, 2021
Author:hyperstown
Views Total:294 views
Official Page:Go to website
Last Update:September 16, 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:

09/16/2021

  • Beautify code. No core changed.

You Might Be Interested In:


One thought 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