Horizontal & Vertical – Bidirectional JavaScript Scroller with Images & HTML Content

March 3, 2008 18:35 by Ramana

kick it on DotNetKicks.com  

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)


Comments

Income protection insurance February 18. 2010 05:31
Really appreciate this post. It’s hard to sort the good from the bad sometimes, but I think you’ve nailed it!
Income protection insurance
management coaching February 18. 2010 06:19
I feel a lot more people need to read this, very good info!
http://www.howtocoachyourstaff.com.au/
management coaching

Add comment


(Will show your Gravatar icon)

  Country flag

Click to change captcha
biuquote
  • Comment
  • Preview
Loading