Here we are using Moo.fx for Mootools to do the trick of animation effect, inspiration of Fx.Scroll demo.
From Mootools, for this animation the main component is Fx.Scroll & supporting component is Fx.Styles along with other basic core modules that comes with it when we select the above two & download the script (mootools-release-1.11.js).
Programmatically if you would like to create the scrolling elements then element ids need to be created sequentially “content” + i.
The problem with mootools Fx.Scroll is, if the element is in visible area and/or hidden area is not lengthy enough then it wont move to the focused element since it is already in visible area. So we will be looping through again our content elements to produce the extra elements for scroll effect. Basically the repeated count will be number of elements in visible area plus one. If you are able to see 4 elements at a time then repeat initial 5 elements at the end again.
We can change the direction, stop & start the looping of images or html or mixed elements.
Find it action which describes you more. Its blazing fast & cross-browser.
Source of it for download: Bidirectional JavaScript Scroller (~20 KB)
Be the first to rate this post
- Currently 0/5 Stars.
- 1
- 2
- 3
- 4
- 5