4umi.com/web/javascript/plode

Plode!

Dynamic Javascript

Quantum tremor est futurus!

Shatter this!
This paragraph, when the mouse gets too near.
...

The script

function prepareplode(oriid,mx,my) {
 var ori = document.getElementById(oriid);
 pieces[oriid] = [];
 ploding[oriid] = false;
 var el, i, j, n, t,
  hw = ori.offsetWidth,
  hh = ori.offsetHeight,
  im = ori.cloneNode(true),
  bag = ori.cloneNode(false); //document.createElement(ori.tagName);
 im.id = ''; im.className = 'im';
 bag.className = ori.className;
 bag.style.position = 'absolute';
 bag.style.left = (parseInt(getstyle(ori.parentNode.parentNode,'margin-left'))+ori.offsetLeft)+'px';
 bag.style.top = (parseInt(getstyle(ori.parentNode.parentNode,'margin-top'))+ori.parentNode.offsetTop)+'px';
 for(i=0;i<mx;i++) { pieces[oriid][i] = [];
  for(j=0;j<my;j++) { el = im.cloneNode(true);
   el.style.clip='rect('+ Math.ceil(j/my*hh)+'px '+Math.ceil((i+1)/mx*hw)+'px '+Math.ceil((j+1)/my*hh)+'px '+Math.ceil(i/mx*hw)+'px)';
   el.onmouseover=function() { startplode(oriid); };
   pieces[oriid][i][j] = el;
   bag.appendChild(el);
  }
 }
 ori.parentNode.insertBefore( bag, ori );
 ori.style.visibility = 'hidden';
}

function startplode(el) {
  if( !ploding[el] ) { ploding[el] = true; plode( el, 0, Math.random() * pi ); }
}

function plode(el,t,r) {
 var i, j, x, y, ws = getwindow(),
  wx = ( ws.w - pieces[el][0][1].scrollWidth ) / 2,
  wy = ( ws.h - pieces[el][0][1].scrollHeight ) / 2;
 t += pi / 50 * ( pi - t + 0.1 );
 i = pieces[el].length; while(i--) {
 j = pieces[el][0].length; while(j--) {
  x=Math.floor(Math.sin(t)*Math.cos(0.5*t+r*0.5+(j+r)/(j+pi)+i/r)*(wx*i/pieces[el].length));
  y=Math.floor(Math.sin(t)*Math.cos(0.5*t-i*0.1+j/r)*(wy*(pieces[el][0].length-j)/pieces[el][0].length));
  pieces[el][i][j].style.left = x + 'px';
  pieces[el][i][j].style.top = y + 'px';
 }}
 if(t<pi) {
  window.setTimeout( 'plode(\''+el+'\','+t+','+r+')', 1 );
 } else {
  i = pieces[el].length; while(i--) {
   j = pieces[el][0].length; while(j--) {
    pieces[el][i][j].style.left = '0';
    pieces[el][i][j].style.top = '0';
   }
  }
 ploding[el] = false;
 }
}

var pi = Math.PI, ploding = {}, pieces = {};

prepareplode('header',24,4);
prepareplode('content',24,6);
prepareplode('dante',9,9);