https://github.com/radkinz/snow.js
A JS library to help add snow animation to your website!
https://github.com/radkinz/snow.js
javascript javascript-library snow
Last synced: about 2 months ago
JSON representation
A JS library to help add snow animation to your website!
- Host: GitHub
- URL: https://github.com/radkinz/snow.js
- Owner: radkinz
- License: isc
- Created: 2021-07-19T03:37:13.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-11-25T19:52:53.000Z (over 3 years ago)
- Last Synced: 2025-03-14T19:53:00.536Z (2 months ago)
- Topics: javascript, javascript-library, snow
- Language: JavaScript
- Homepage: https://radkinz.github.io/snow.js/demo/index.html
- Size: 35.2 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# snow.js
`Snow.js` is a stand alone javascript library that helps "cool down" the web with a beautiful snowfall.
### Installation
`npm install snowfall.js`
### JS
The setup to run `snow.js` is fairly simple. You will have to create a new instance of `Snow`, and pass it an element id that you want to encapsulate the snowfall.
```html
//import the Snow module
import * as Snow from '/node_modules/snowfall.js/snow.js'
// Snow script included on the page, already.
window.onload = function () {
var snow = new Snow.default({
id: 'snow'
});
//Can run the snowfall by calling:
snow.start();
}
```
There are also optional elements that you can pass to customize the snowfall....
### Themes
The default theme displays the ordinary white snowflakes. However if you want something more bright then you can use the theme `colors`.
```html
window.onload = function () {
var snow = new Snow.default({
id: 'snow',
theme: 'colors'
});
}
```
If blue is your favorite color, you can use the theme `blues`!
There are also the themes: `berry`, `pastel`, and `purple` to help your snowfall be a little more unique.
### Snowflake Size
If you want to change the range of the snowflake sizes, then you can pass a min and max size element:
```html
window.onload = function () {
var snow = new Snow.default({
id: 'snow',
theme: 'colors',
min_size: 3,
max_size: 300
});
}
```
For reference the default range is a min size of 2 and a max size of 7.
### Toggle Snowfall
Maybe you do not want snowfall on your website 24/7? In that case, you can stop the snowfall with ``snow.stop()`` and you can toggle the snowfall with ``snow.toggle()``.
The toggle feature can be good, for example, if you want the user to be able to switch back and forth between snow and no snow by a mouse click as seen with the code...
```html
window.onload = function () {
//create new snow
var snow = new Snow.default({
id: 'snow',
theme: 'berry',
min_size: 1,
max_size: 5
});
snow.start();
document.querySelector("body").onclick = function () {
snow.toggle();
}
}
```