Dynamic Drive DHTML Script- Rain/Snow effect without images

IE5+: IE 5 and above
FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
Opr7+: Opera 7 and above.

New Revised CSS Library Forums Web Tools

Rain/Snow effect without images

Description: This is simply one of the most efficient, elegant rain/snow effects we've seen. Created without the aid of images, it's also hassle-free to install. Toggle between rain and snow effect with the change of one variable!

Demo: IE users, look around you. Click here to see the script used as a snow effect.

Directions

Step 1: Add the below to the HEAD section of your page:

Select All
<style> .drop { position: absolute; width: 3; filter: flipV(), flipH(); font-size: 40; color: blue } </style> <script language="javascript"> //Rain/Snow effect- By Craig Blanchette Craiga.topcities.com //Script featured on Dynamic Drive //Visit http://www.dynamicdrive.com for this script and more snow = false; // false-rain; true-snow snowsym = " * " //These are the symbols for each rainsym = " ' " //You can put images here. howmany = 10 //How many drops/snowflakes? /**************Do not need to change anything below***********/ if(snow){sym = snowsym; speed=1; angle=10; drops=howmany} else{sym = rainsym; speed=50; drops=howmany; angle=6} movex = -speed/angle; movey = speed; count = 0; function moverain(){ for(move = 0; move < drops; move++){ xx[move]+=movex; yy[move]+=mv[move]; hmm = Math.round(Math.random()*1); if(xx[move] < 0){xx[move] = maxx+10;} if(yy[move] > maxy){yy[move] = 10;} drop[move].left = xx[move] drop[move].top = yy[move]+document.body.scrollTop; }setTimeout('moverain()','1')} </script>

Step 2: Add the following code to the END of your document, right above the </BODY> tag:

Now go play God with the weather!