https://github.com/erikwatson/snowfall.js
Stay cool ☃️
https://github.com/erikwatson/snowfall.js
animation canvas snow winter
Last synced: 5 months ago
JSON representation
Stay cool ☃️
- Host: GitHub
- URL: https://github.com/erikwatson/snowfall.js
- Owner: erikwatson
- License: mit
- Created: 2018-02-08T16:33:26.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2025-12-02T07:37:52.000Z (7 months ago)
- Last Synced: 2025-12-03T11:32:18.640Z (7 months ago)
- Topics: animation, canvas, snow, winter
- Language: TypeScript
- Homepage: https://erikwatson.github.io/snowfall.js/
- Size: 22.9 MB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Snowfall :: Stay cool
The perfect snow effect for your Winter themed website!
Suggested use: attach it as a fixed background to your page with the content
displayed over the top. [Check out this example](http://erikwatson.me/?snow).
## Features
- Easy to use
- Beautiful
- Highly configurable | [API docs](https://erikwatson.github.io/snowfall-docs/) | [Config editor](https://erikwatson.github.io/snowfall-editor/)
- Consistent density of snowflakes, regardless of screen size
- Scheduling, so you can set it and forget it
## Instructions
First, add a div with an ID of `snowfall` to your page.
```html
```
It's recommended that you make it full screen and attach it to the background, something like this.
```html
#snowfall {
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
}
```
Then, at the bottom of your page body add the following, this will run snowfall with the default settings.
```html
snowfall.start({
layers: [{}]
})
```
### Custom configs
Same as above but we pass a config object. Your config overrides the default settings.
```js
snowfall.start({
layers: [
{
colour: '#8d90b7'
}
]
})
```
### Scheduling
Same as the above, but we pass a schedule config and the optional snowfall config to the `.schedule(user_schedule, user_config)` function.
```js
const userSchedule = {
from: { month: 12, day: 1 },
to: { month: 12, day: 31 }
}
snowfall.schedule(userSchedule, {
layers: [
{
colour: '#8d90b7'
}
]
})
```
### CDN Links
- Latest 4.x (minified): `https://cdn.jsdelivr.net/npm/@erikwatson/snowfall@4/dist/index.min.js`
- Latest 4.x (unminified): `https://cdn.jsdelivr.net/npm/@erikwatson/snowfall@4/dist/index.js`
- Specific version: `https://cdn.jsdelivr.net/npm/@erikwatson/snowfall@4.0.0/dist/index.min.js`
## Author
- [Erik Watson](http://erikwatson.me)