Snow!

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 through.

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.

Here is the Javascript code to add the snow to a page (replace “snow.js” with the filename and path to the script file you have chosen):

<script src="snow.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
  try {
    snow.count = 30;   // number of flakes
    snow.delay = 20;   // timer interval
    snow.minSpeed = 2; // minimum movement/time slice
    snow.maxSpeed = 5; // maximum movement/time slice
    snow.start();
  } catch(e) {
    // no snow :(
  }
};
//]]>
</script>

The example shows the snow being started with the count, delay, minSpeed and maxSpeed options being set. All of the options have reasonable default values, so setting them is not required. Here is the full list of options available:

If you would like to try out the snow on your own site (or any other site for that matter) I have prepared these bookmarklets: Snow and Snow version 2

Drag one of the links to your bookmark bar, add it to your bookmarks list or however you add bookmarks, then when you visit the page you want to add snow to, load the bookmark. The Javascript file will be loaded and snow will start falling on the page. The snow bookmarkets use a toggle function, so hitting the bookmark again will turn it back off (or you could just reload the page or navigate away - it does not persist).

* The original snow script was written in 2010.