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.

This 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).

I'm giving the source away completely free of any license, so you can do whatever you want with it. I suggest changing the createFlake function to vary the shape, but that's up to you. Here it is: snow.js.

Here is the code to add snow to a page:

<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 count, delay, minSpeed and maxSpeed options all have default values, so setting them is not required.

If you would like to try out the snow on your own site (or any other site for that matter) I have prepared this bookmarklet: Snow!

Drag it 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 snow.js file will be loaded and snow will start falling on the page. The snow uses 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).

Update 02/02/2011 - I've made an improvement to the script, making it a bit more efficient and with some variation in the size of the flakes and the way they fall.