snoweb

snoweb

Falling snowflakes for your website and christmas mood ❄️

Why snoweb?

• Everyone loves snow
• Zero config although you can pass some configuration
• Easy to use

Quick start

Step 1: Install

npm install snoweb --save

or

yarn add snoweb

Step 2: Import and use

import { Snoweb } from 'snoweb';

const snoweb = new Snoweb();
snoweb.start();

Step 3: Enjoy

Tips

Tip 1: Configure your snowfall

You can provide configuration object Partal<SnowebConfig> into the constructor. See the description in the API section

const snoweb = new Snoweb({
  gravity: 20,
  snowflakesColor: 'red',
  snowflakesCount: 200,
  zIndex: 1000,
});

Tip 2: Smooth stop + destroy

By default snoweb.stop() method just smoothly stops the snowfall animation. However, the DOM element still remains. If you want to stop and fully destroy it you can do the following:

const snoweb = new Snoweb();
snoweb.start();
// ...
snoweb.stop(() => snoweb.destroy());

API

Snoweb

Methods	What it does?
constructor(config: Partial<SnowebConfig>)	Default constructor which is executed after you have called new Snoweb().
start(): void	Begins the snowfall. Ho-ho-ho 🎅
stop(afterStopCallback?: () => void): void	Stops the snowfall. afterStopCallback?: () => void - a callback function which is called after the snowfall is fully stopped (all the snowflakes have fallen).
destroy(): void	Stops the snowfall immediately and destroys the DOM element
isStarted(): boolean	Shows whether the snowfall is being started

SnowebConfig

Property	What it does?	Default value
snowflakesCount: number	Exact count of the snowflakes to be rendered. Might affect performance if the value is too big.	100
gravity: number	The higher the value the faster the snowflakes will fall	10
snowflakesColor: string	CSS color of the snowflakes	'#fff'
zIndex: number	Snowfall z-index	1000000

Check it out on Stackblitz

https://stackblitz.com/edit/snoweb?file=index.js