Christmas comes around once again and the thoughts of web developers the world over turn to festivising their websites. Festivising is probably not a real word, but I expect you know what I mean.
One year* I decided to make some simple falling snow to liven up a page,
and I used the HTML5
canvas element to do it with - which means
it won't work in every browser (i.e. not IE < 9). It works by adding a
canvas element to the page behind the main content. Areas of the
page with no background or a translucent background will let the snow show
I'm giving the source away completely free of any license, so you can do whatever you want with it. The original version only has a simple flake shape and simpler animation. The 2014 edition, snow2.js, adds more complex flake shapes and the new “wobble” and “spin” options. The new version also uses a fixed position so that the snow stays in place when the page is scrolled.
|snow.js||The original snow.js script.|
|snow2.js||Version 2 of the script.|
|snow2.min.js||Minified version of the snow2.js script.|
The example shows the snow being started with the
being set. All of the options have reasonable default values, so setting them
is not required. Here is the full list of options available:
Snow options - Hide table
||Number of flakes falling at once.|
||Time between frames of animation.|
||Amount of horizontal movement.|
||Maximum falling speed.|
||Minimum falling speed.|
||Speed of constant rotation.|
||Amount of wind.|
||Amount of side-to-side rotation.|
* The original snow script was written in 2010.