Javacript Scrolling Animation Using scrollTop property
****
*****
*******
*********
*******
***
****
*****
*******
*********
*******
***
Javacript Scrolling Animation Using scrollTop property
****
*****
*******
*********
*******
***
****
*****
*******
*********
*******
***
Javacript Scrolling Animation Using scrollTop property
The code is pretty simple. For achieving the animation effect out our div should be overflown.
a = document.getElementById('scroll'); c = 0; b = function() { if(200+a.scrollTop == a.scrollHeight) { a.scrollTop = 0; c = 0; }; c++; a.scrollTop = c; setTimeout('b()',10) } b();
Need Explanation?
scrollTop(integer) property shows that how far you have scrolled from the top. You can also set a value to scrollTop which will scroll automatically to a value specified.
we have a recursive function that sets the scrollTop property. If we reach at the bottom of our element that's when if(200+a.scrollTop==a.scrollHeight) we reset the scrollTop property.
Here is a tutorial about How you can achieve the same animation using margin.
If You need more explanation, Let me Know.
No comments:
Post a Comment