Friendstertutorials.com » Block Worm Effect on Your Page

Block Worm Effect on Your Page

Contributed by Kalvin on December 1st, 2008 Categories: Javascript Codes, Tricks and Tweaks

4,007 Views

(+11 rating, 6 votes)

Loading ...

Paste the codes below in your JS File.

Change the HEX code for your desired color.

Preview Here

/**GRAPHIC WORM (MF2FM) POSTED BY: KALVIN**/
// <![CDATA[
var colours=new Array("#HEXCODE", "#HEXCODE", "#HEXCODE", "#HEXCODE", "#HEXCODE", "#HEXCODE", "#HEXCODE"); // select colours to fade from wanted colour to background colour
var border="#FFFFFF"; // colour of border
var speed=70; // speed of animation, lower is faster
var size=20; // size of blocks

/***************************\
* Block Worm Graphic Effect *
* 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";
}
// ]]>
/**GRAPHIC WORM END**/

Share This Tutorial:

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks