Christmas Snowing Effect (with Snow Slush) :: RV's free DHTML and JavaScript text and graphic scripts ::

LET IT SNOW!

This script has been tested on and shown to work with the following browsers: Internet Explorer version 7 and above Google Chrome version 4 and above Mozilla Firefox version 2 and above Apple Safari version 5 and above Opera version 9 and above (including Opera mobile) Android Browser version 3 and above

29-May-2013:Added option for snow to fall over or under other items on the page. 06-Jun-2012: Minor performance improvements. 15-Nov-2011: Minor improvements in time for Christmas! 01-Dec-2005: Added feature to set height at which slush melts. 21-Nov-2005: Improved to run more smoothly. 28-Sep-2005: Converted to XML compatible. Re-tested with Firefox, Opera & IE
STEP 1: Copy and paste the code below so that it sits between the <head> and </head> tags at the top of your web-page: <script type="text/javascript"> // <![CDATA[ var speed=33; // lower number for faster var flakes=100; // number of flakes var colour="#96c"; // colour of flakes var slush=20; // set to '0' for no slush or otherwise set to height at which slush melts var over_or_under="over"; // set to "over" for snow to always be on top, or "under" to allow it to float behind other objects /**************************\ Let It Snow Effect * (c)2004-13 mf2fm web-design * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * \**************************/ var flks=new Array(); var flkx=new Array(); var flky=new Array(); var fldy=new Array(); var slss=new Array(); var slsh=new Array(); var swide, shigh, boddie; function addLoadEvent(funky) { var oldonload=window.onload; if (typeof(oldonload)!='function') window.onload=funky; else window.onload=function() { if (oldonload) oldonload(); funky(); } } addLoadEvent(baby_its_cold_outside); function baby_its_cold_outside() { if (document.getElementById) { var i; boddie=document.createElement("div"); i=boddie.style; i.position="fixed"; i.top="0px"; i.left="0px"; i.overflow="visible"; i.width="1px"; i.height="1px"; i.backgroundColor="transparent"; document.body.appendChild(boddie); set_width(); for (var i=0; i<flakes; i++) { flks[i]=createDiv(3, 3, colour); flkx[i]=3Math.floor(Math.random()swide/3); flky[i]=Math.floor(Math.random()shigh); fldy[i]=2+Math.floor(Math.random()4); flks[i].style.left=flkx[i]+"px"; flks[i].style.top=flky[i]+"px"; flks[i].style.zIndex=(over_or_under=="over")?"1001":"0"; boddie.appendChild(flks[i]); } setInterval("let_it_snow()", speed); }} function createDiv(height, width, colour) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height+"px"; div.style.width=width+"px"; div.style.overflow="hidden"; div.style.backgroundColor=colour; return (div); } window.onresize=set_width; function set_width() { var sw_min=999999; var sh_min=999999; if (document.documentElement && document.documentElement.clientWidth) { if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth; if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight; } if (typeof(self.innerWidth)=='number' && self.innerWidth) { if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth; if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight; } if (document.body.clientWidth) { if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth; if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight; } if (sw_min==999999 \|\| sh_min==999999) { sw_min=800; sh_min=600; } swide=sw_min-3; shigh=sh_min; if (slush) { if (swide/3>slss.length) for (i=slss.length; i<swide/3; i++) { if (!slsh[i]) slsh[i]=3; slss[i]=createDiv(slsh[i], 3, colour); boddie.appendChild(slss[i]); } for (i=0; i<swide/3; i++) { slss[i].style.height=slsh[i]+"px"; slss[i].style.top=shigh-slsh[i]+"px"; slss[i].style.left=3i+"px"; } if (i<slss.length && slss[i].style.left!="-3px") for (; i<slss.length; i++) slss[i].style.left="-3px"; } } function let_it_snow(c) { var i, x, o=0, z=0; for (i=0; i<flakes; i++) { flky[i]+=fldy[i]; x=Math.floor(flkx[i]/3); if (slush) { o+=slsh[x]; if (flky[i]>=shigh-slsh[x]) { if (x<swide && slsh[x]>slsh[x+1]+3) x++; else if (x>0 && slsh[x]>slsh[x-1]+3) x--; slss[x].style.top=shigh-(slsh[x]+=3)+"px"; slss[x].style.height=slsh[x]+"px"; flky[i]=shigh; } } if (flky[i]>=shigh \|\| flkx[i]>swide) { flky[i]=0; fldy[i]=2+Math.floor(Math.random()4); flkx[i]=3Math.floor(Math.random()swide/3); flks[i].style.left=flkx[i]+"px"; z++; } flks[i].style.top=flky[i]+"px"; } if (o>flakesslush) for (i=0; i<slsh.length; i++) if (slsh[i]>3) slsh[i]--; if (z \|\| o>flakes*slush) set_width(); } // ]]> </script> CLICK HERE to select the above script ready to paste it into your clipboard
STEP 2: Change the colour (and other parameters) at the start of the script you just copied to the settings you require (you probably want white snow, not the purple stuff on this page!)
THAT'S IT When your page loads, it should start snowing, just like it is on this page, which looks very Christmassy.

Copyright notice: All scripts are © copyright mf2fm.com. You can use them wherever and whenever you wish, however the copyright notice at the start of the script should remain intact and a link back to this page would be appreciated. The address for this page is: http://www.mf2fm.com/rv/dhtmlsnow.php.

This page has been viewed 160 times. It was last viewed on Fri 22 Nov, 2024 at 23:12