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

LET IT SNOW!
This script has been tested on and shown to work with Internet Explorer 5+, Netscape 6+, Firefox 1.0+ and Opera 7+
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="#639"; // colour of flakes var slush=20; // set to '0' for no slush or otherwise set to height at which slush melts /**************************\ Let It Snow Effect * (c) 2004-6 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; window.onload=function() { if (document.getElementById) { var b, s; b=document.createElement("div"); s=b.style; s.position="absolute"; b.setAttribute("id", "bod"); document.body.appendChild(b); set_scroll(); set_width(); for (var i=0; i<flakes; i++) { flks[i]=createDiv(3, 3); 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"; b.appendChild(flks[i]); } setInterval("let_it_snow()", speed); }} function createDiv(height, width) { 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() { if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (typeof(self.innerHeight)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } swide-=3; if (slush) { if (swide/3>slss.length) for (var i=slss.length; i<swide/3; i++) { slss[i]=createDiv(3, 3); slss[i].style.left=3i+"px"; document.getElementById("bod").appendChild(slss[i]); slsh[i]=3; } for (var i=0; i<swide/3; i++) slss[i].style.top=shigh-slsh[i]+"px"; } } window.onscroll=set_scroll; function set_scroll() { var sleft, sdown; if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop \|\| document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop \|\| document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } var s=document.getElementById("bod").style; s.top=sdown+"px"; s.left=sleft+"px"; } function let_it_snow(c) { var i, x, o=0; for (i=0; i<flakes; i++) { flky[i]+=fldy[i]; x=flkx[i]/3; if (slush) o+=slsh[x]; if (flky[i]>=shigh-(slush?slsh[x]:0)) { if (slush) { 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]=0; fldy[i]=2+Math.floor(Math.random()4); flkx[i]=3Math.floor(Math.random()swide/3); flks[i].style.left=flkx[i]+"px"; } flks[i].style.top=flky[i]+"px"; } if (o>flakesslush) { for (i=0; i<swide/3; i++) if (slsh[i]>1) slsh[i]--; 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.
No menu on the left? Click here for a full list of all the free DHTML and Javascript effects you could be using on your web-site!

Interested in learning more about JavaScript, CSS, HTML/XHTML/XML and PHP programming? I would highly recommend the following books...

[ This page viewed 3113 times. Last viewed Sun 20 Jul, 2008 at 03:37 ]