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 from0.png
(or .gif) to4.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
- SnowStorm v1.3.20081208
- SnowStorm v1.2.20041121a
- SnowStorm v1.2.20031218a
- SnowStorm v1.2.20031213a
- SnowStorm v1.1.20031206c
Version History
1.3.20081215
- IE doctype rendering tweak: position:absolute used for "BackCompat" (eg. HTML 4 transitional) DOCTYPE in IE.
- Fixed an annoying horizontal scrollbar positioning-related bug with wind affecting snow near the right edge.
1.3.20081208
- New snowStick (snow stickiness) and followMouse (dynamic wind) options.
- Four years later, we still have IE 6 and can't use position:fixed globally for "sticky" snow, but we're really close.
- Position:fixed used for all more modern browsers.
- Improved distribution of initial snow dump, new recycling.
- Focus/blur events (minus IE) for graceful pausing of snow, sparing user's CPU when window not in focus.
- Bonus smashable christmas lights demo, using SoundManager 2 and YUI DOM/Event libraries
- Cleaner, simplified event code, removal of old PNG wrapper stuff.
1.2.20041121a
- Script moved into one file (snowstorm.js) for simplicity
- addEventHandler and PNG support functions updated
1.2.20031218a
- Opera 7 ("O7") support added.. I think.
- Improved initialization speed (less snowflake objects on startup)
- Err.. That's about it.
1.2.20031213a
- Netscape 6.x "sticky" snow behavior fixed (now works)
- IE:mac bug event handler bug fixed (script should now work)
- Snow collection feature added
- Snowflake speed is relative to size (Cheap pseudo-3D effect)
1.1.20031206c
- Initial release
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.