search

erikwatson / snowfall.js

Stay cool ☃️
https://erikwatson.github.io/snowfall.js/
MIT License
4 stars 2 forks source link
animation canvas snow winter

readme

snowfall.js

snowfall

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.

Features

Instructions - Package Manager

Install it

# if you're using yarn install with
yarn add @erikwatson/snowfall

# if you're using npm install with
npm install @erikwatson/snowfall

Use it

Add a div with an ID of snowfall to your page. You will need to set the width and height of this yourself using CSS.

<div id="snowfall"></div>

Then, at the bottom of your page body add the following.

<script
  type="text/javascript"
  src="https://github.com/erikwatson/snowfall.js/raw/master/node_modules/@erikwatson/snowfall/dist/snowfall.min.js"
></script>
<script>
  // You can change the defaults by passing in a config object here
  // Use the Visual Config Editor to create one
  // Start snowfall right now
  snowfall.start()

  // Alternatively you can schedule snowfall to start between certain dates
  // This can take a config from the Visual Config Editor as a second argument.
  // e.g.
  // Start snowfall only between the start of December and the end of February.
  snowfall.schedule({
    from: { month: 12, day: 1 },
    to: { month: 28, day: 2 }
  })
</script>

WARNING: You should symlink to the .js file rather than have a publicly accessible node_modules folder. It is this way here just to keep example simple.

Instructions - CDN

First, add a div with an ID of snow-container to your page. You will need to set the width and height of this yourself using CSS.

<div id="snowfall"></div>

Then, at the bottom of your page body add the following.

<script src="https://cdn.jsdelivr.net/npm/@erikwatson/snowfall/dist/snowfall.min.js"></script>
<script>
  // You can change the defaults by passing in a config object here
  // Use the Visual Config Editor to create one
  snowfall.start()
</script>

Specify Version

It is not recommended to always use the latest version, especially in production. You can change the CDN url to specify control over the version using the @version syntax like so.

Author