Falling Snow

Site Navigation 

There is a certain perversity in publishing a falling snow script in May that has some appeal. Hopefully it will have been forgotten about by the time next Christmas comes around and will not be inflicted on unsuspecting web site visitors.

I originally wrote this script as a re-working of "both browsers" falling snow script posted to the comp.lang.javascript Usenet newsgroup in the hope that the inadequacies of the original could be fixed. The original was very poor and my style is so different from its author's that the only thing remaining from the original is part of the positioning algorithm.

I did not post this script to the newsgroup at the time because one of the things I most disliked about the original was the way the browser was forced to put up scroll bars every time a snowflake drifted out of the right hand side or the bottom of the window (if they were not already being displayed). To solve that problem I added a system of two nested DIV elements and used a combination of offsetting the inner and sizing the outer to produce a clipping effect that kept the impact on the displayed document to within the current viewport. Without placing any part of the snow fakes outside of the viewport there is not need for the browser to alter its scroll bars while running the script.

Unfortunately my clipping algorithm relied on another piece of code that does its best to report viewport dimensions and offsets, but that code was not as good as it could have been and the results were occasional scroll bar generation in Gecko browsers. I did not want to post the code as it was at the time and I did not have time to correct the problem. However, recently I needed the clipping algorithm for another project, and it needed the viewport information to be correct across browsers (at least the ones that make that information available) so I had to fix that code. Having done that, simply dropping the corrected interface into the falling snow script solved its intermittent problems on Gecko browsers and now it seems to be working properly.

Scripts of this type are irritating; you cannot do much reading while they are operating as they are very distracting. So this one runs for a limited time (30 seconds as configured here) and then stops adding new snow flakes to the top of the screen. The effect stops when the last of the flakes then on the screen falls off the bottom. (Refreshing the page will re-start the effect.)

Incidentally, the snow flakes are darkish blue because pail blue/white flakes will not show up against the background colours suggested by my CSS.

© Richard Cornford 2004