A beautiful and highly configurable snow effect for your winter themed project
npm install @erikwatson/snowfallThe 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.
- Easy to use
- Beautiful
- Highly configurable | API docs | Config editor
- Consistent density of snowflakes, regardless of screen size
- Scheduling, so you can set it and forget it
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`
Then, at the bottom of your page body add the following, this will run snowfall with the default settings.
`html`
Same as above but we pass a config object. Your config overrides the default settings.
`js`
snowfall.start({
layers: [
{
colour: '#8d90b7'
}
]
})
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'
}
]
})
- Latest 4.x (minified): https://cdn.jsdelivr.net/npm/@erikwatson/snowfall@4/dist/index.min.js
- Latest 4.x (unminified):
- Specific version: