Skip to content
/ snowf Public

Javascript snowflakes generator -- Let it snow on your page! ❄ demo: https://fuxy526.github.io/snowf/

License

Notifications You must be signed in to change notification settings

Fuxy526/snowf

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

snowf

Version Downloads License

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 install snowf --save

Usage

Include snowf with script tag:

<script src="snowf.min.js"></script>

Or use modules:

// ES6
import snowf from 'snowf';

// Commonjs
var snowf = require('snowf');

Simply init snowf like this:

snowf.init({
	size: 5,
	amount: 50
});

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.init();

// Adjust width and height of window:
window.onresize = function() {
  snow.resize();
};

// Reset the Snowf object and regenerate snowflakes:
snow.reset();

// reset the Snowf object with new options:
snow.setOptions({
	amount: 80
});

// Change the wind power ( This will not reset the Snowf object ):
// Arguments: (wind, time)
snow.wind(1);
snow.wind(2, 2000);

// Change the vertical speed ( This will not reset the Snowf object )
snow.speed(2);

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

Releases

No releases published

Packages

No packages published