RV's free PHP, DHTML and JavaScript text and graphic scripts :: Winter Snow Effect

WINTER SNOWFALL
This script has been tested on and shown to work with Internet Explorer 6+, Netscape 6+, Firefox 1.0+ and Opera 7+
05-Nov-2006: First release.
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=20; // lower number for faster var flakes=20; // number of flakes var flake_image="/images/snowflake.gif"; // location of snowflake graphic /**************************\ Winter Drifting Snow Effect* (c) 2006 mf2fm web-design * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * \**************************/ var swide, shigh; var dx=new Array(); var xp=new Array(); var yp=new Array(); var am=new Array(); var sty=new Array(); window.onload=function() { if (document.getElementById) { var k, f, b; b=document.createElement("div"); b.style.position="absolute"; b.setAttribute("id", "bod"); document.body.appendChild(b); set_scroll(); set_width(); for (var i=0; i<flakes; i++) { dx[i]=0; am[i]=Math.random()20; xp[i]=am[i]+Math.random()(swide-2am[i]-25); yp[i]=Math.random()shigh; sty[i]=0.75+1.25Math.random(); f=document.createElement("div"); f.style.position="absolute"; f.setAttribute("id", "flk"+i); f.style.zIndex=i; f.style.top=yp[i]+"px"; f.style.left=xp[i]+"px"; k=document.createElement("img"); k.src=flake_image; f.appendChild(k); b.appendChild(f); } setInterval("winter_snow()", speed); }} 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; } else { swide=800; shigh=600 } } 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; } document.getElementById("bod").style.top=sdown+"px"; document.getElementById("bod").style.left=sleft+"px"; } function winter_snow() { for (var i=0; i<flakes; i++) { yp[i]+=sty[i]; if (yp[i]>shigh-30) { xp[i]=am[i]+Math.random()(swide-2am[i]-25); yp[i]=0; sty[i]=0.75+1.25Math.random(); } dx[i]+=0.02+Math.random()/10; document.getElementById("flk"+i).style.top=yp[i]+"px"; document.getElementById("flk"+i).style.left=(xp[i]+am[i]Math.sin(dx[i]))+"px"; } } // ]]> </script> CLICK HERE to select the above script ready to paste it into your clipboard
STEP 2: Change the parameters at the top of the script to match your settings. Pay particular attention to the variable 'flake_image' which must point to the location of your snowflake graphic.
THAT'S IT When your page loads, it should start snowing, just like it is on this page, which looks very wintery.
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 2750 times. Last viewed Sun 20 Jul, 2008 at 03:37 ]