BLOCK WORM
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="#9933ff"; // colour of border var speed=80; // speed of animation, lower is faster var size=20; // size of blocks /***************************\ * Block Worm Graphic Effect * *(c)2005-6 mf2fm web-design * * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * \***************************/ var swide, shigh; var blox=new Array(); var t, l, dt, dl; 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<20; 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; t=4+size*Math.floor(shigh/(size*2)); l=4+size*Math.floor(shigh/(size*2)); set_dir(); mainblock(0); }} function set_dir() { dt=-size+size*Math.floor(3*Math.random()); dl=(dt)?-size+size*Math.floor(3*Math.random()):(Math.random()<0.5)?size:-size; } function mainblock(r) { do { if (Math.random()<0.2) set_dir(); } while (t+dt>shigh || t+dt<0 || l+dl>swide || l+dl<0); var s=document.getElementById("block"+r).style; s.left=(l+=dl)+"px"; s.top=(t+=dt)+"px"; blox[r]=colours.length; subblock(r); setTimeout("mainblock("+(++r%20)+")", 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*2.2); } 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, blocky the worm should wander around the page, 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!
Interested in learning more about JavaScript, CSS, HTML/XHTML/XML and PHP programming? I would highly recommend the following books...
[ This page viewed 2796 times. Last viewed Sun 20 Jul, 2008 at 03:35 ]
