BLOCK RAIN
This script has been tested on and shown to work with Internet Explorer 5+, Netscape 6+, Firefox 1.0 and Opera 7+.
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 colours=new Array("#ffffff", "#f7eeff", "#eeddff", "#e6ccff", "#ddbbff", "#d5aaff", "#cc99ff"); // select colours to fade from wanted colour to background colour var border="#00cccc"; // colour of border var speed=80; // speed of animation, lower is faster var size=20; // size of blocks var drops=40; // number of raindrops /***************************\ * Block Rain Graphic Effect * *(c)2005-6 mf2fm web-design * * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * \***************************/ var colours=new Array("#ffffff", "#eef7ff", "#ddeeff", "#cce6ff", "#bbddff", "#aad5ff", "#99ccff"); var swide, shigh; var blox=new Array(); window.onload=function() { if (document.getElementById) { set_width(); var i, d, s, b; b=document.createElement("div"); s=b.style; s.position="absolute"; b.setAttribute("id", "bod"); document.body.appendChild(b); set_scroll(); 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.border="1px solid "+border; d.setAttribute("id", "block"+i); b.appendChild(d); blox[i]=-1; } size+=4; mainblock(0); }} function mainblock(r) { var t, l, s; t=4+size*Math.floor(Math.random()*shigh/size); l=4+size*Math.floor(Math.random()*swide/size); s=document.getElementById("block"+r).style; s.left=l+"px"; s.top=t+"px"; blox[r]=colours.length; subblock(r); setTimeout("mainblock("+(++r%drops)+")", speed); } function subblock(r) { var s=document.getElementById("block"+r).style; if (--blox[r]>-1) { s.visibility="visible"; s.backgroundColor=colours[blox[r]]; setTimeout("subblock("+r+")", speed*drops/8); } else s.visibility="hidden"; } window.onresize=set_width; function set_width() { if (typeof(self.innerWidth)=="number") { swide=self.innerWidth-10; shigh=self.innerHeight-10; } else if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } else { swide=800; shigh=600; } swide-=15; shigh-=15; } 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"; } // ]]> </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 'blocks', just like on this one!
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!
If you like my Text and Graphic Effects,
please rate them @
ScriptSearch.com
!
- Select -
Excellent!
Very Good
Good
Fair
Poor
[ This page viewed 85 times. Last viewed Fri 30 Jul, 2010 at 00:55 ]