README
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 |