Block Rain - Square rain drops effect for your web-site from RV's free DHTML scripts

BLOCK RAIN

This script has been tested on and shown to work with the following browsers: Internet Explorer version 6 and above Google Chrome version 1 and above Mozilla Firefox version 2 and above Apple Safari version 5 and above Opera version 7 and above (including Opera mobile) Android Browser version 2 and above
03-Jan-2012: Updated to use opacity for fades and scroll more smoothly. 21-Nov-2005: 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 colour="#cc99ff"; // colours of drops var border="#6600ff"; // colour of border var speed=40; // speed of animation, lower is faster var size=20; // size of blocks var drops=40; // number of raindrops /**************************\ Block Rain Graphic Effect * (c)2005-12 mf2fm web-design * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * \**************************/ var swide, shigh; var blox=new Array(); var blok=new Array(); var boddie; window.onload=function() { if (document.getElementById) { var i, d, s; boddie=document.createElement("div"); s=boddie.style; s.position="fixed"; s.top="0px"; s.left="0px"; s.width="1px"; s.height="1px"; s.overflow="visible"; s.backgroundColor="transparent"; document.body.appendChild(boddie); set_width(); for (i=0; i<drops; i++) { d=document.createElement("div"); s=d.style; s.width=size+"px"; s.height=size+"px"; s.overflow="hidden"; s.position="absolute"; s.visibility="hidden"; s.backgroundColor=colour; s.border="1px solid "+border; blox[i]=-1; blok[i]=d; boddie.appendChild(blok[i]); } size+=4; mainblock(0); }} function mainblock(r) { var t, l; t=4+sizeMath.floor(Math.random()(shigh-size)/size); l=4+sizeMath.floor(Math.random()(swide-size)/size); blok[r].style.left=l+"px"; blok[r].style.top=t+"px"; blox[r]=11; blok[r].style.visibility="visible"; subblock(r); setTimeout("mainblock("+(++r%drops)+")", speed); } function subblock(r) { if (--blox[r]>-1) { if (navigator.appName=="Microsoft Internet Explorer") blok[r].style.filter="alpha(opacity="+blox[r]10+")"; else blok[r].style.opacity=blox[r]/10; setTimeout("subblock("+r+")", speed*drops/12); } else blok[r].style.visibility="hidden"; } 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)!="undefined" && 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; shigh=sh_min; } // ]]> </script> CLICK HERE to select all the above text
STEP 2: Change the colour (and other parameters) at the start of the script you just copied to the settings you require.
THAT'S IT When your page loads, it should start raining square 'blocks', just like on this one!

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/dhtmlblockrain.php.

This page has been viewed 451 times. It was last viewed on Mon 30 Dec, 2024 at 13:47