Animated Snowfall Effect In Pure JavaScript

Category: Animation , Javascript | November 26, 2022
Author:hyperstown
Views Total:3,860 views
Official Page:Go to website
Last Update:November 26, 2022
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:

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.

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