DHTML Snowstorm!

Version 1.2.20041121a - Updated 11.21.2004
Code by Scott Schiller | schillmania.com

Change Wind
Stop Snowing

Latest Changes

Executive Summary

So, you want Javascript snow on your web site, eh?

SnowStorm is a Javascript-driven snow effect that can be easily implemented into web pages.

It has been designed to be easy to use. A single Javascript file provides the functionality required; the only other files needed are the images of snowflakes themselves.

I'd like to use this on my site.

See this basic example for reference.

Technical Notes

SnowStorm works under most of the current major browsers (IE 5.x+, Netscape 6+). Testing has been limited to those browsers on PC/Mac. If you are seeing snow as you read this, then the script is working as expected.

Thanks to the PNG format and a "wrapper" class written to support it, the benefits of alpha transparency can be seen on most browsers with this implementation. IE requires the use of a proprietary DXFilter to properly display PNG images with alpha transparency, but this is handled "automagically" by the PNG wrapper class.

The snow script relies on a PNG handler class to add PNG functionality where applicable. Support for PNG can be removed easily enough also, if desired. Slower machines on IE:win32 may notice slightly improved performance when using GIF over PNG, but this has not been thoroughly tested.

Implementation

One Javascript reference is required. Aside from customization and images, that's it.

<script type="text/javascript" src="script/snowstorm.js"></script>

This file is viewable under the script directory.

File Structure

The script looks for snow images under ./image/snow/ by default as shown below. If desired, this can be changed in the user-configurable section.

./
+ image/
  + snow/
    0.png
    1.png
    2.png
    3.png
    4.png
    5.png
    0.gif
    1.gif
    2.gif
    3.gif
    4.gif
    5.gif
    none.gif
+ script/
    snowstorm.js

Configurable Properties

SnowStorm can be fairly easily customized; some of the major properties are listed below.

usePNG
Enables PNG images if supported. false disables all PNG usage and uses GIFs - may run slightly faster on older systems.
imagePath
The relative path to the snowflake PNG/GIF images. eg. image/snow/ (note the trailing slash - important)
flakeTypes
Sets the range of snowflake images to use. eg. a value of 5 will use images ranging from 0.png (or .gif) to 4.png.
flakesMax
Sets the maximum number of snowflakes that can exist on the screen at any given time.
flakesMaxActive
Sets the limit of "falling" snowflakes (ie. moving on the screen, thus considered to be active.)
vMax
Defines the maximum X and Y velocities for the storm; a random value in this range is selected for each snowflake.
flakeWidth
Width (pixels) allocated for ech snowflake image.
flakeHeight
Height (pixels) allocated for each snowflake image.
flakeBottom
Limits the "floor" (pixels) of the snow. If unspecified, snow will "stick" to the bottom of the browser window and persists through browser resize/scrolling.
snowCollect
Specifies whether or not snow should be allowed to stack and pile up. Can eventually be very CPU-intensive.

Download

ZIP file, includes this demo page and source code.

Older versions

Version History

1.2.20041121a

1.2.20031218a

1.2.20031213a

1.1.20031206c

Feedback

Comments, suggestions, questions, criticism?
improbablyaspammer@schillmania.com
(Note: This address might look funny with javascript disabled, but is still valid.)

Web

schillmania.com
schillmania.com