Snowstorm: A Javascript Snow Effect for HTML

Bringing snow to the web since 2003. Current version: 1.3.20081215

Change Wind | Stop Snowing | Bonus widget: Smash Christmas Lights

(Note: Christmas Lights are incompatible with IE 6 because of PNG images.)

Let It Snow.

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 is free for use.

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.

What kind of things can I customize?

You can adjust the snow speed, the amount of snow, the "wind", if and where it should collect (and if it should build up over time, or quickly "melt"), and finally, whether the snow can react to the mouse moving (ie., "wind changes.")

And the Christmas Lights?

The christmas lights are a separate experimental script which also has an example. It is undocumented, but the script can be modified to taste if you're the adventurous type.

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.

PNG images are used for all browsers except IE 6, which gets GIFs.

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 - eg., /path/to/snow/images/

./
+ 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
+ script/
    snowstorm.js

Configurable Properties

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

usePNG
Uses PNG images if supported. false disables PNG for 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 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.
snowStick
Allows the snow to "stick" to the bottom of the window. When off, snow will never sit at the bottom.
snowCollect
Specifies whether or not snow should be allowed to stack and pile up. Can eventually be very CPU-intensive.
Also requires snowStick = true.
followMouse
Allows snow to move dynamically with the "wind", relative to the mouse's X (left/right) coordinates.

Download

ZIP file, includes this demo page and source code.

Older versions

Version History

1.3.20081215

1.3.20081208

1.2.20041121a

1.2.20031218a

1.2.20031213a

1.1.20031206c

Feedback

Comments, suggestions, questions, criticism?

A few contact options are available. Get in touch via email or IM.

Elsewhere On The Internets

This is a side project by Scott Schiller. Wacky DHTML/javascript experiments and other nonsense can be found at schillmania.com.