Wiggly worm made of blocks effect from RV's free DHTML and JavaScript scripts

BLOCK WORM
This script has been tested on and shown to work with the following browsers: Internet Explorer version 7 and above Google Chrome version 4 and above Mozilla Firefox version 2 and above Apple Safari version 5 and above Opera version 9 and above (including Opera mobile) Android Browser version 3 and above
29-Jan-2012: Updated and improved to give more 'wormlike' behaviour. 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", "#f9f3ff", "#f7eeff", "#eeddff", "#e6ccff", "#ddbbff", "#d5aaff", "#cc99ff"); // select colours to fade from background colour to worm colour var border="#9933ff"; // colour of border var speed=80; // speed of animation, lower is faster var worm=24; // length of worm var size=20; // size of blocks /**************************\ Block Worm 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 bloy=new Array(); var bloc=new Array(); var blok=new Array(); var blot=new Array(); var dx, dy; var x, y; var c=0; var pete=speedworm/colours.length; var boddie; window.onload=function() { if (document.getElementById) { var i, d, s; boddie=document.createElement("div"); boddie.style.position="fixed"; boddie.style.top="0px"; boddie.style.left="0px"; boddie.style.width="1px"; boddie.style.height="1px"; boddie.style.overflow="visible"; boddie.style.backgroundColor="transparent"; document.body.appendChild(boddie); size+=4; set_width(); x=4+sizeMath.floor(swide/(size2)); y=4+sizeMath.floor(shigh/(size2)); for (i=0; i<worm; i++) { d=document.createElement("div"); s=d.style; s.width=(size-4)+"px"; s.height=(size-4)+"px"; s.overflow="hidden"; s.position="absolute"; s.border="1px solid "+border; blok[i]=s; boddie.appendChild(d); bloc[i]=-1; blox[i]=x; bloy[i]=y; blot[i]=false; } set_dir(true); setInterval('mainblock()', speed); }} function set_dir(hardth) { var n=dx; if (hardth) { dx=size(Math.floor(3Math.random())-1); dy=size(Math.floor(3Math.random())-1); } else { if (dx && dy) { if (Math.random()<0.5) dx=0; else dy=0; } else if (!dy) dy=(Math.random()<0.5)?size:-size; else dx=(Math.random()<0.5)?size:-size; } } function mainblock() { var t=false; while (x+dx>swide \|\| x+dx<0 \|\| y+dy>shigh \|\| y+dy<0 \|\| Math.random()<.1 \|\| (t=in_array(x+dx, y+dy, c))) set_dir(t); blok[c].left=(blox[c]=(x+=dx))+"px"; blok[c].top=(bloy[c]=(y+=dy))+"px"; bloc[c]=colours.length; if (blot[c]) clearTimeout(blot[c]); subblock(c); c=++c%worm; } function in_array(xtest, ytest, pos) { var i, j; for (i=pos-3; i<pos; i++) { j=(i<0)?i+worm:i; if (blox[j]==xtest && bloy[j]==ytest) return (true); } return (false); } function subblock(r) { if (--bloc[r]>-1) { blok[r].backgroundColor=colours[bloc[r]]; blot[r]=setTimeout("subblock("+r+")", pete); } else blot[r]=false; } 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-size; shigh=sh_min-size; } // ]]> </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!

Link directly to this page: http://www.mf2fm.com/rv/dhtmlblockworm.php

This page viewed 978 times. Last viewed Sat 4 Feb, 2012 at 07:10