Creating Customizable Snowfall with JavaScript – Snowflakes.js

Preview:

Description:

Yet another JavaScript library to bring a winter wonderland to your web pages.

The snowflakes.js allows developers to generate customizable snowflakes that flutter and swirl across the screen.

You can specify the number of snowflakes to create and granular control over their appearance and behavior. For example, you can set a range for the snowflake size, opacity, color, etc. Wind effect and rotation can be toggled on/off as desired.

How to use it:

1. Install and import the Snowflakes.js library.

# NPM
$ npm install magic-snowflakes

// ES Module
import Snowflakes from 'magic-snowflakes';
// For browser
<script src="/dist/snowflakes.js"></script>

2. Initialize the Snowflakes to apply a default snowfall effect to the whole body.

const snowflakes = new Snowflakes();

3. Customize the snowfall effect with the following options.

const snowflakes = new Snowflakes({
  // the color(s) of the generated snowflakes
  color: '#5ECDEF',
  // append the snowflakes to this container
  container: document.body,
  // the number of snowflakes
  count: 50,
  // animation speed
  speed: 1,
  stop: false,
  // determine whether to rotate the snowflakes
  rotation: true,
  // min/max opacity
  minOpacity: 0.6,
  maxOpacity: 1,
  // min/max size
  minSize: 10,
  maxSize: 25,
  // width/height of the container
  width: undefined,
  height: undefined,
  // with or without wind
  wind: true,
  // CSS z-index property
  zIndex: 9999,
  // auto-resize snowflakes based on window size
  autoResize: true,
});

4. API methods.

// start
snowflakes.start()
// stop
snowflakes.stop()
// show snowflakes
snowflakes.show()
// hide snowflakes
snowflakes.hide()
// resize snowflakes
snowflakes.resize()
// destroy the instance
snowflakes.destroy()

Changelog:

v7.0.1 (10/31/2024)

• Removed -webkit- prefix for animation and transform CSS properties.
• Added hasSupport() static method.
• Simplified installation in HTML page, only one line is needed.