JavaScript Rolling Animation Using marginTop

In My previous Post I wrote about how You can get a rolling animtaion using javascript scrollTop property. As the "scrollTop" is not a W3C recommendation we will use 'marginTop' of the style object to make a better solution.

****
*****
Javacript Rolling Animation Example Using margin

*******
*********
*******
*******
*********
*******
***
Free Javascript scripts

We will set a negative value to the css margin-top property using a recursive function. This will move the div upwards gradually.Here is the sample Code.

d = document.getElementById('cat');

h = 0;

ab = function(){
 if(h == -150){
  h = 0;
  }
 h--;
 d.style.marginTop = h+"px";
 setTimeout('ab();', 10);
 }
 
ab();

Easy and pretty simple huh? This is just the basic, You can make awesome animations/sliding effects. This is compatible in all modern browsers. If you need more info, post a comment and I'll try to help.