Archives

Categories

Tom's Excellent Website Snow (using Greasemonkey)

Behold: a version of Tom’s Excellent Javascript Snow (unobtrusive and customisable javascript snow for web pages using no images) that works on all websites you open on your browser (provided your browser is Firefox or something else that can run Greasemonkey scripts)!

To install it:

  1. Install Greasemonkey add-on for Firefox: https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
  2. Make sure the monkey (probably at the top-right) is happy and colourful. Click on it if not.
  3. Install the tomsnow script by going to http://www.aurochs.org/zlib/js/userjs/tomsnow.user.js then
  4. Click on the Install button.
  5. Go and look at a new web page or reload one.

If you want to turn Greasemonkey off altogether, click on the monkey so he’s grey. If you want to stop individual scripts, click on the monkey, click on Manage User Scripts, and click on Disable next to the script.

These instructions were tested on Firefox 3.6.24 on Linux although I imagine they would be fine on any recent version of Firefox. I would be interested to hear anything confirming or undermining that assertion.

If you’re happy to play around, the snow is very customisable: you can easily alter the amount, speed, and style of snow, and so forth:

  1. Click on the monkey
  2. Click on Manage User Scripts
  3. Select tomsnow from the list
  4. Click on Options
  5. Click on Edit this user script (you will probably have to select a text editor at this point)
  6. Look for the section under the line of asterisks where more instructions can be found on how to make customisations.
  7. Save the file and reload any pages to see changes.

The Greasemonkey version of the script uses slightly different default settings to the previous version, in particular using a lower density of flakes as a huge blizzard of snow is not likely to be welcome if used on all sites one browses.

I haven’t found any particular problems and it doesn’t seem to stop any sites working although sites that are already very script heavy are obviously less happy about running more, e.g. Twitter which is fine but can get sticky, although Gmail seems curiously OK. My cPanel was the only one which was really not happy. When you manage a Greasemonkey script, you will see a box where you can specify websites that you don’t want it to work on. For example, put https://twitter.com/* and it will stop tomsnow working on that URL with anything after it.

*

Tom's Excellent Javascript Snow

Behold: Tom’s Excellent Javascript Snow: unobtrusive and customisable javascript snow for web pages using no images! If you’re looking at this directly, rather than through an RSS aggregator, you should see it falling now. Unless, that is, you’re watching this on Dave, in which case it will be some time past Christmas and I might have taken the snow away again. However, it always snowing at Tom’s Excellent Javascript Snow page!

I’ve been meaning to write this since last year when my attempts were full of fail. The idea was to create simple unobstrusive javascript snow that could be added to any page and that didn’t require any images. I think Tom’s Excellent Javascript Snow fulfills these criteria and is therefore full of win. Furthermore, it is very customisable, so you can easily alter the amount, speed, and style of snow, and so forth. Incidentally, it uses the asterisk character (*) by default. There is in fact a Unicode Tight Trifoliate Snowflake character, but it is only available in a few fonts by the looks of it and I haven’t tried it. The script depends on the DOM and kind of uses CSS, but it is all defined through the Javascript: so many of the properties are different for individual snowflakes or change while the script is running, that it is not worth having a general style. It also means you only need one file to do everything.

To use it, copy tomsnow_v1.js to a directory on your web-server, and add the following code to the head of any pages on which you would like snow:

<script type=”text/javascript” src=”http://www.yourdomain.com/path/tomsnow_v1.js”></script>
<script type=”text/javascript”>
function init () {
snow();
}
window.onload=init;
</script>

I’m sure Stuart will tell me there’s a better way of doing it…

I know this works on Firefox 2 and Internet Explorer 6 on Windows as well as Firefox 3 on Linux.

In the unlikely event you do use this, do let me know for the sake of my own vanity. Any comments generally are welcome. I do have some ideas for version 2, maybe for next year, mostly around wind effects such as better horizontal drifting, prevailing winds, and gusts. Ideally, I would like to make the snow lay in some way, as in the snow at St Pancras (you might have to wait for it to kick in), but that is quite unlikely given the trouble I had with page heights as it was.