Make It Snow On Your Website With Snowfall.js

Preview:

Description:

Yet another snowfall animation library that uses HTML5 canvas and requestAnimationFrame API to generate snowflakes falling on the page.

The number, size, speed, color, and even symbol of the snowflakes are fully customizable to match your design needs. Ideal for spicing up landing pages, games, holiday themes, or just creating some seasonal ambiance on your site.

How to use it:

1. Download and import the Snowfall.js script into your web project.

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

2. Create a new Snowfall instance, and the library will do the rest.

let snowfall = new Snowfall({
    // options here
});

3. Customize the snowflakes with the following options.

let snowfall = new Snowfall({
    // number of snowflakes
    count: 100,
    // min/max size
    minRadius: 10,
    maxRadius: 30,
    // min/max speed
    minSpeed: 3,
    maxSpeed: 10,
    // custom symbol or text for snowflakes
    text: "\u2744", 
    // color of snowflakes
    color: "#ffffff",
    // z-index for the canvas
    zIndex: "1000" 
});

Changelog:

v1.1.0 (11/27/2023)

• Add a method to destroy the snowfall and remove the canvas element;
• Change some functions to arrow functions for consistency;
• Simplify some conditions for checking the visibility and position of the snowflakes;
• Change some calculations for the speed and size of the snowflakes;
• Fix some minor issues with the canvas resizing and appending;
• Improve the cross-browser compatibility and performance of the script;