snowf
Javascript snowflakes generator -- Let it snow on your page! ❄
- All modern browsers are supported (Tested in Chrome, Firefox, Opera, Safari, IE9+ and Edge).
Install
npm:
npm install snowf --save
Usage
Include snowf with script tag:
Or use modules:
// ES6; // Commonjsvar snowf = ;
Simply init snowf like this:
snowf;
Default Options
Argument | Type | Default Value | Description |
---|---|---|---|
dom | HTMLDomElement, String | document.body | The element that snowfall canvas append to. |
amount | Number | 50 | Number of snowflakes displayed at a time. |
size | Number | 5 | Size of snowflakes. |
speed | Number | 1.5 | Vertical speed of snowflakes. The larger, the snowflakes drop faster. |
wind | Number | 0 | Horizontal wind power. Wind will blow right if this is a positive number, and a negative number makes wind blow left. |
color | String | '#fff' | Color of snowflakes. This option accepts HEX or RGB color code, such as "#fff", "#ffffff", "rgb(255,255,255)". |
opacity | Number | 0.8 | The max opacity of snowflakes. The plugin will generate snowflakes with different opacity from 0 to this number. |
swing | Number | 1 | Swing offset of snowflakes. If you don't want them to swing, set this option as 0. |
image | String | null | Set this option to replace the snowflake with your image. |
zIndex | Number | null | Position of the canvas layer. Set the layer front or back by changing this value. |
More Examples
var snow = snowf; // Adjust width and height of window:window { snow;}; // Reset the Snowf object and regenerate snowflakes:snow; // reset the Snowf object with new options:snow; // Change the wind power ( This will not reset the Snowf object ):// Arguments: (wind, time)snow;snow; // Change the vertical speed ( This will not reset the Snowf object )snow;
Others
react-snowf (use snowf with React)
vue-snowf (use snowf with Vue)
Licence
snowf is open source and released under the MIT Licence.
Copyright (c) 2017 Fuxy526