DHTML Snowstorm. Making it snow on the internets since 2. Bringing snow to the web since 2. This version 1. 4. Internet Explorer 6 for windows has been giving me a hard time with expanding fixed width or fixed height boxes divs in the most non standard fashion. The trick. As one would expect, works in Firefox but not in IE9. See the above textshadow code in action without any IE9 goodness Step 1 IE Blur Filter. HTML You can make them with a single div. Its nice to have classes for each direction possibility. CSS The idea is a box with zero width and height. The a. Update 2 If you are looking for a guide to Dual Boot Windows Vista and Mac OSX Leopard, please follow this guide Hack Attack Dual Boot Leopard and Windows Vista. If youve ever been caught in the situation of needing to drill a clean straight hole down the center of a bolt or rod, youve probably tried and ended. Explains CSS bugs in modern browsers, provides demo examples of CSS behaviors, and shows how to make it work without using tables for layout purposes. Change Wind Stop Snowing Bonus widget Smash Christmas LightsNote Christmas Lights are incompatible with IE 6 because of PNG images. Let It Snow. So, you want Java. Script snow on your web site, eh Snowstorm is a Java. Script driven snow effect that can be easily added to web pages. It is free for use, and easy to set up. WbsuWJ7vwPc/Urg3AM_352I/AAAAAAAAAhM/35p4SlINeNQ/s1600/BrandingRSOPWarningonIE10.png' alt='Position Fixed Ie Hack' title='Position Fixed Ie Hack' />A single Java. Script file provides the functionality required. No images are used for the snow effect. Id like to use this on my site. If you wish to target IE10 by itself, you can use the ie slash9 property hack in conjunction with it. This is all you need to get started lt script srcsnowstorm. 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 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. And the Christmas LightsThe christmas lights are a separate experimental script which also has an example. It is undocumented, but the script can be modified to taste if youre the adventurous type. Download. ZIP file, includes this demo page and source code. Also on Github github. License. Snowstorm is provided under a BSD license. Technical Notes. Snowstorm works under modern browsers, and as far back as IE 6 possibly even 5. If you are seeing snow as you read this, then the script is working as expected. CPU Use. 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 doesnt 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. 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. Mobile Support. 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 snow. Storm. exclude. Mobile false or edit the snowstorm. Snowstorm on devices like the i. Phone, i. Pad and Android phones etc. This demo page has the effect enabled for mobile devices. Implementation. One Java. Script reference is required. Aside from customization, thats it Once you have snowstorm configured, you can use the optimized, minified version of the code 4. Customizing Snowstorm. Once you have Snowstorm running in your page, you can customize its properties either by editing the snowstorm. Storm object after snowstorm. For example lt required snowstorm JS, default behaviour. Storm object. Storm. Color 9. Storm. flakes. Max. Active 9. 6 show more snow on screen at once. Storm. use. Twinkle. Effect true let the snow flicker in and out of view. See this customized example in action. Configurable Properties. Snowstorm can be fairly easily customized some of the major properties are listed below. Storm. auto. Start true Whether the snow should start automatically or not. Storm. animation. Interval 3. 3 Theoretical milliseconds per frame measurement. CPU use. 5. 0 more conservative, but slowersnow. Storm. flake. Bottom null Limits the floor pixels of the snow. If unspecified, snow will stick to the bottom of the browser window and persists through browser resizescrolling. Case Management Training Course here. Storm. flakes. Max 1. Sets the maximum number of snowflakes that can exist on the screen at any given time. Storm. flakes. Max. Active 6. 4 Sets the limit of falling snowflakes ie. Storm. follow. Mouse true Allows snow to move dynamically with the wind, relative to the mouses X leftright coordinates. Storm. freeze. On. Blur true Stops the snow effect when the browser window goes out of focus, eg., user is in another tab. Saves CPU, nicer to user. Storm. snow. Color fff Dont eat or use yellow snow. Storm. snow. Character bull bullet. Changing this may result in cropping of the character and may require flake. Widthflake. Height changes, so be careful. Storm. snow. Stick true Allows the snow to stick to the bottom of the window. When off, snow will never sit at the bottom. Storm. target. Element null An HTML element which snow will be appended to default document body. Can be an element ID string eg. Div, or a DOM node reference. See relative and absolute positioned examples. Storm. use. Melt. Effect true When recycling fallen snow or rarely, when falling, have it melt and fade out if browser supports itsnow. Storm. use. Twinkle. Effect true Allow snow to randomly flicker in and out of view while fallingsnow. Storm. use. Position. Fixed false true snow not affected by window scroll. CPU load, disabled by default if enabled, used only where supported. Storm. v. Max. X 8 snow. Storm. v. Max. Y 5 Defines maximum X and Y velocities for the storm a random value in this range is selected for each snowflake. Methods. Snowstorm has a few basic methods for controlling the snow effect. Storm. randomize. WindSets the wind speed with a random value relative to v. Max. X and v. Max. World Clock Computer Desktop on this page. Y properties. snow. Storm. freezeStops the snow effect in place. Storm. resumeContinues snowing from a frozen state. Storm. toggle. SnowEnables or disables the snow effect depending on state, same as calling freeze or resume. Storm. stopFreezes and kills the snowstorm effect, and removes related event handlers. Snowstorm will not work properly if other methods are called after stop. Version History. Older versions. Added use. Pixel. Position to allow forcing of pixels for lefttop positioning vs. Detect and force pixel based positioning if target. Element is specified, or body is relatively positioned. Adjust positioning logic for target. Element case. 1. 4. Fixed regression where flake. Bottom would result in snow not properly sticking. Percent based leftright positioning is now applied in all browsers, making resizing better. GPU hardware accelerated snow, where supported. Faster drawing, less load on CPU. Percent based bottomright positioning of snow, rather than topleft based pixel based positioning where supported. JSLint cleanup. Fixed the color of christmas light fragments to match the lights, finally. Designlayout tweaks, slightly more modern. Image. Optim optimized image files byte savingsAdded snow. Storm. auto. Start, for those who want to start snow at their own leisure. Additional Mobile check Opera Mobilecursor default over snow instead of text I beam cursormelt. Frame animation counter correction possible JS error fix1. Tweaked right margin for IE 9 under Windows 7, fixing horizontal scrollbar issue. Re appeased the jslint gods. Added formal BSD license project was previously free for any use. Modernized event addremove handlers, wait for window. New exclude. Mobile option, ignore i. Phone etc. by default high CPU use on mobile is evil for both CPU, and batteries. New freeze. On. Blur option, allow control of previously hardcoded behaviour. Focus based freeze. On. Blur now works under IE 6, too. Code cleanup, now passes updated more strict jslint validation. Text based snow and color options using bullet HTML entity. New snow. Melt effect, resize fade where supported. Films. info button v 1. Vote for ice. Films. IE 6 lt link relstylesheet typetextcss mediascreen hrefhttp globolister.