Snowstorm: A JavaScript Snow Effect for HTML
38 |Bringing snow to the web since 2003. This version: 1.44.20131208
39 | 40 |41 | Change Wind | Stop Snowing | Bonus widget: Smash Christmas Lights 42 |
43 |(Note: Christmas Lights are incompatible with IE 6 because of PNG images.)
44 | 45 |Let It Snow.
46 | 47 |So, you want JavaScript snow on your web site, eh?
48 | 49 |Snowstorm is a JavaScript-driven snow effect that can be easily added to web pages. It is free for use, and easy to set up. A single JavaScript file provides the functionality required. No images are used for the snow effect.
50 | 51 |I'd like to use this on my site.
52 | 53 |This is all you need to get started:
54 | 55 |56 |
<script src="snowstorm.js"></script>57 | 58 | 59 |
See this basic example for reference.
60 | 61 |What kind of things can I customize?
62 | 63 |You can adjust the snow speed, the amount of snow, the "wind", if and where it should stick (and if it should "melt"), and finally, whether the snow can react to the mouse moving (ie., "wind changes.") See Customizing Snowstorm for more.
64 | 65 |And the Christmas Lights?
66 | 67 |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.
68 | 69 |Download
70 |ZIP file, includes this demo page and source code.
71 | 72 |-
73 |
- Snowstorm v1.44.20131208 74 |
Also on Github: github.com/scottschiller/snowstorm/
77 | 78 |License
79 |Snowstorm is provided under a BSD license.
80 | 81 |Technical Notes
82 | 83 |Snowstorm works under modern browsers, and as far back as IE 6 - possibly even 5.5, if you can find a copy!
84 |If you are seeing snow as you read this, then the script is working as expected.
85 | 86 |CPU Use
87 | 88 |Snowstorm can eat up a lot of CPU, even on modern computers, because of the number of elements being moved around the screen at once. The basic example may have notably lower CPU use as it doesn't include the christmas lights, and the page layout is much simpler. Consider raising the animation interval, and lowering the amount of snowflakes (active and max) to help reduce CPU use.
89 | 90 |Where supported, Snowstorm will attempt to use GPU-based hardware acceleration to draw and animate the snow. Having GPU acceleration can help in reducing CPU load.
91 | 92 |Mobile Support
93 | 94 |By default, mobile devices are excluded from the snow effect to be nice to their CPUs (and batteries.) If your local marketing department insists, "This must work on mobile!" despite being warned of the downsides, you can set snowStorm.excludeMobile = false; (or edit the snowstorm.js file directly) to enable Snowstorm on devices like the iPhone, iPad and Android phones etc. This demo page has the effect enabled for mobile devices.
Implementation
97 | 98 |One JavaScript reference is required. Aside from customization, that's it!
99 | 100 |101 | <script src="snowstorm.js"></script> 102 |103 | 104 |
Once you have snowstorm configured, you can use the optimized, minified version of the code (~40% smaller):
105 | 106 |107 |
<script src="snowstorm-min.js"></script>108 | 109 | 110 |
Customizing Snowstorm
111 | 112 |Once you have Snowstorm running in your page, you can customize its properties either by editing the snowstorm.js file directly, or assigning new values to the snowStorm object after snowstorm.js has loaded.
113 | 114 |For example:
115 | 116 |117 | <!-- required snowstorm JS, default behaviour --> 118 | <script src="snowstorm.js"></script> 119 | 120 | <!-- now, we'll customize the snowStorm object --> 121 | <script> 122 | snowStorm.snowColor = '#99ccff'; // blue-ish snow!? 123 | snowStorm.flakesMaxActive = 96; // show more snow on screen at once 124 | snowStorm.useTwinkleEffect = true; // let the snow flicker in and out of view 125 | </script> 126 |127 | 128 |
See this customized example in action.
129 | 130 |Configurable Properties
131 | 132 |Snowstorm can be fairly easily customized; some of the major properties are listed below.
133 | 134 |-
135 |
136 |
snowStorm.autoStart = true;
137 | - Whether the snow should start automatically or not. 138 | 139 |
snowStorm.animationInterval = 33;
140 | - Theoretical "milliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower 141 | 142 |
snowStorm.flakeBottom = null;
143 | - 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. 144 | 145 |
snowStorm.flakesMax = 128;
146 | - Sets the maximum number of snowflakes that can exist on the screen at any given time. 147 | 148 |
snowStorm.flakesMaxActive = 64;
149 | - Sets the limit of "falling" snowflakes (ie. moving on the screen, thus considered to be active.) 150 | 151 |
snowStorm.followMouse = true;
152 | - Allows snow to move dynamically with the "wind", relative to the mouse's X (left/right) coordinates. 153 | 154 |
snowStorm.freezeOnBlur = true;
155 | - Stops the snow effect when the browser window goes out of focus, eg., user is in another tab. Saves CPU, nicer to user. 156 | 157 |
snowStorm.snowColor = '#fff';
158 | - Don't eat (or use?) yellow snow. 159 | 160 |
snowStorm.snowCharacter = '•';
161 | - • (•) = bullet. · entity (·) is not used as it's square on some systems etc. Changing this may result in cropping of the character and may require flakeWidth/flakeHeight changes, so be careful. 162 | 163 |
snowStorm.snowStick = true;
164 | - Allows the snow to "stick" to the bottom of the window. When off, snow will never sit at the bottom. 165 | 166 |
snowStorm.targetElement = null;
167 | - An HTML element which snow will be appended to (default: document body.) Can be an element ID string eg. 'myDiv', or a DOM node reference. See relative and absolute-positioned examples. 168 | 169 |
snowStorm.useMeltEffect = true;
170 | - When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it 171 | 172 |
snowStorm.useTwinkleEffect = true;
173 | - Allow snow to randomly "flicker" in and out of view while falling 174 | 175 |
snowStorm.usePositionFixed = false;
176 | - true = snow not affected by window scroll. may increase CPU load, disabled by default - if enabled, used only where supported. 177 | 178 |
snowStorm.vMaxX = 8;
snowStorm.vMaxY = 5;
179 | - Defines maximum X and Y velocities for the storm; a random value in this range is selected for each snowflake. 180 | 181 |
Methods
184 | 185 |Snowstorm has a few basic methods for controlling the snow effect.
186 | 187 |-
188 |
189 |
snowStorm.randomizeWind()
190 | - Sets the wind speed with a random value relative to vMaxX and vMaxY properties. 191 | 192 |
snowStorm.freeze()
193 | - Stops the snow effect in place. 194 | 195 |
snowStorm.resume()
196 | - Continues snowing from a "frozen" state. 197 | 198 |
snowStorm.toggleSnow()
199 | - Enables or disables the snow effect depending on state, same as calling freeze() or resume(). 200 | 201 |
snowStorm.stop()
202 | - Freezes and kills the snowstorm effect, and removes related event handlers. Snowstorm will not work properly if other methods are called after stop(). 203 | 204 |
Version History
207 | 208 |Older versions
209 |-
210 |
- Snowstorm v1.44.20131125 211 |
- Snowstorm v1.44.20131111 212 |
- Snowstorm v1.43.20111201 213 |
- Snowstorm v1.42.20111120 214 |
- Snowstorm v1.41.20101113 215 |
- Snowstorm v1.4.20091115 216 |
- Snowstorm v1.3.20081215 217 |
- Snowstorm v1.3.20081208 218 |
- Snowstorm v1.2.20041121a 219 |
- Snowstorm v1.2.20031218a 220 |
- Snowstorm v1.2.20031213a 221 |
- Snowstorm v1.1.20031206c 222 |
1.44.20131208
225 |-
226 |
- Added
usePixelPositionto allow forcing of pixels for left/top positioning vs. percentage-based values.
227 | - Detect and force pixel-based positioning if
targetElementis specified, orbodyis relatively-positioned.
228 | - Adjust positioning logic for
targetElementcase.
229 |
1.44.20131125
233 |-
234 |
- Fixed regression where
flakeBottomwould result in snow not properly sticking.
235 | - Percent based left/right positioning is now applied in all browsers, making resizing better. 236 |
1.44.20131111
239 |-
240 |
- GPU (hardware)-accelerated snow, where supported. Faster drawing, less load on CPU. 241 |
- Percent-based bottom/right positioning of snow, rather than top/left-based pixel-based positioning (where supported.) 242 |
- JSLint cleanup. 243 |
- Fixed the color of christmas light fragments to match the lights, finally. 244 |
- Design/layout tweaks, slightly more modern. 245 |
1.43.20111201
248 |-
249 |
- ImageOptim-optimized image files (byte savings) 250 |
- Added snowStorm.autoStart, for those who want to start snow at their own leisure 251 |
- Additional Mobile check: Opera Mobile 252 |
- cursor:default over snow (instead of text I-beam cursor) 253 |
- meltFrame animation counter correction (possible JS error fix) 254 |
1.42.20111120
257 |-
258 |
- Tweaked right margin for IE 9 under Windows 7, fixing horizontal scrollbar issue 259 |
- Re-appeased the jslint gods 260 |
1.41.20101113
263 |-
264 |
- Added formal BSD license (project was previously "free for any use.") 265 |
- Modernized event add/remove handlers, wait for window.onload() before starting 266 |
- New excludeMobile option, ignore iPhone etc. by default (high CPU use on mobile is evil for both CPU, and batteries.) 267 |
- New freezeOnBlur option, allow control of previously-hardcoded behaviour 268 |
- Focus-based freezeOnBlur now works under IE 6, too 269 |
- Code cleanup, now passes updated (more-strict) jslint validation 270 |
1.4.20091115
273 |-
274 |
- Text-based snow (and color options) using "bullet" HTML entity • .. no more images! 275 |
- New snowMelt effect, resize + fade where supported 276 |
- New twinkle effect (like stars) 277 |
- New animationInterval, usePositionFixed, snowColor attributes, common attributes now public on snowStorm object eg. snowStorm.stick = true; 278 |
- Code passes jslint validation (2009-10-04 edition, default settings) 279 |
- Removed "collect" feature, somewhat-buggy and nobody used it 280 |
- Fixed sticky/recycle behaviour 281 |
1.3.20081215
284 |-
285 |
- IE doctype rendering tweak: position:absolute used for "BackCompat" (HTML 4 transitional) DOCTYPE in IE. 286 |
- Fixed an annoying horizontal scrollbar positioning-related bug with wind affecting snow near the right edge. 287 |
1.3.20081208
290 |-
291 |
- New snowStick (snow stickiness) and followMouse (dynamic wind) options. 292 |
- Four years later, we still have IE 6 and can't use position:fixed globally for "sticky" snow, but we're really close. 293 |
- Position:fixed used for all more modern browsers. 294 |
- Improved distribution of initial snow dump, new recycling. 295 |
- Focus/blur events (minus IE) for graceful pausing of snow, sparing user's CPU when window not in focus. 296 |
- Bonus smashable christmas lights demo, using SoundManager 2 and YUI DOM/Event libraries 297 |
- Cleaner, simplified event code, removal of old PNG wrapper stuff. 298 |
1.2.20041121a
301 |-
302 |
- Script moved into one file (snowstorm.js) for simplicity 303 |
- addEventHandler and PNG support functions updated 304 |
1.2.20031218a
307 |-
308 |
- Opera 7 ("O7") support added.. I think. 309 |
- Improved initialization speed (less snowflake objects on startup) 310 |
- Err.. That's about it. 311 |
1.2.20031213a
314 |-
315 |
- Netscape 6.x "sticky" snow behavior fixed (now works) 316 |
- IE:mac bug event handler bug fixed (script should now work) 317 |
- Snow collection feature added 318 |
- Snowflake speed is relative to size (Cheap pseudo-3D effect) 319 |
1.1.20031206c
322 |-
323 |
- Initial release 324 |
Feedback
327 |Comments, suggestions, questions, criticism?
328 |329 | A few contact options are available. Get in touch via email or IM. 330 |
331 | 332 |Elsewhere On The Internets
333 |334 | This is a side project by Scott Schiller. Wacky DHTML/JavaScript experiments and other nonsense can be found at schillmania.com. 335 |
336 | 337 |