![]() ) is not used as it's square on some systems etc.snowStorm.snowColor = '#fff' Don't eat (or use?) yellow snow. eezeOnBlur = true Stops the snow effect when the browser window goes out of focus, eg., user is in another tab. moving on the screen, thus considered to be active.) snowStorm.followMouse = true Allows snow to move dynamically with the "wind", relative to the mouse's X (left/right) coordinates. snowStorm.flakesMaxActive = 64 Sets the limit of "falling" snowflakes (ie. snowStorm.flakesMax = 128 Sets the maximum number of snowflakes that can exist on the screen at any given time. If unspecified, snow will "stick" to the bottom of the browser window and persists through browser resize/scrolling. 50 = more conservative, but slower snowStorm.flakeBottom = null Limits the "floor" (pixels) of the snow. snowStorm.animationInterval = 33 Theoretical "milliseconds per frame" measurement. toStart = true Whether the snow should start automatically or not. ![]() Snowstorm can be fairly easily customized some of the major properties are listed below. eTwinkleEffect = true // let the snow flicker in and out of view SnowStorm.flakesMaxActive = 96 // show more snow on screen at once SnowStorm.snowColor = '#99ccff' // blue-ish snow!? 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. Once you have snowstorm configured, you can use the optimized, minified version of the code (~40% smaller): This demo page has the effect enabled for mobile devices. Mobile Supportīy 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. Having GPU acceleration can help in reducing CPU load. Where supported, Snowstorm will attempt to use GPU-based hardware acceleration to draw and animate the snow. Consider raising the animation interval, and lowering the amount of snowflakes (active and max) to help reduce CPU use. The basic example may have notably lower CPU use as it doesn't include the christmas lights, and the page layout is much simpler. 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. If you are seeing snow as you read this, then the script is working as expected. Snowstorm works under modern browsers, and as far back as IE 6 - possibly even 5.5, if you can find a copy! Snowstorm is provided under a BSD license. ZIP file, includes this demo page and source code.Īlso on Github: /scottschiller/snowstorm/ License It is undocumented, but the script can be modified to taste if you're the adventurous type. The christmas lights are a separate experimental script which also has an example. 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. ![]() A single JavaScript file provides the functionality required. Snowstorm is a JavaScript-driven snow effect that can be easily added to web pages. So, you want JavaScript snow on your web site, eh? (Note: Christmas Lights are incompatible with IE 6 because of PNG images.) Let It Snow. ![]() This version: 1208Ĭhange Wind | Stop Snowing | Bonus widget: Smash Christmas Lights Snowstorm: A JavaScript Snow Effect for HTMLīringing snow to the web since 2003.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |