I’m dreaming of a white… June?

June 3, 2008 at 2:06 pm (Coding, JavaScript)

It may seem fairly random at this time of year (or for the northern hemisphere any who), but I wrote a snow script yesterday. I made it because I wanted it, but mainly because I wanted to sub class it. The original snowmaker script was written by Peter Gehrig (in 2003 I think), and most of the credit still has to go to him for this script. I am only rewriting it (better hopefully) in an object orientated fashion, and making it more flexible for users.

The script is wrapped up into one class. It uses the Prototype JavaScript library, as a prerequisite, so please include it before the script or it will not work. (The TMC.widget.Snow() class is shown at the button of the page). All that you have to do to initialise the script is create a new instance of it on the page, for example….

var snow = new TMC.widget.Snow();

This is all that is really needed if you just want to create a snow script, however you mgiht use it for something else you it can be easily customised. It takes in certain options that you can adjust on each instance if you wish, for example… (a full list of options is in the source with explanations and recommended value ranges).

var options = {
flakes: 39, // number of snowflakes (more than 30 - 40 not recommended)
speed: 0.8, // speed of sinking (recommended values range from 0.3 to 2)
font: ['Arial Black',Comic Sans MS'], // fonts that create the snowflakes. Add as many fonts as you like
};
var snow = new TMC.widget.Snow(options);

There are also some convenience methods provided for greater control over the script once it has been instantiated. The method names are self explanatory.

var snow = new TMC.widget.Snow();
snow.stop(); // stops the snow falling/moving
snow.start(); // starts the snow falling/moving
snow.hide(); // hides the snow from view (will continue to move, even though not visible)
snow.show(); // brings the snow into view

This is everything you should need to know about the script to really take advantage of all its goodness. Here is the class itself… Pastie Link. I posted it on Pastie as wordpress didn’t like me trying to post the code.

Post a Comment