Most elegant way to implement animated "sliding panels"...

Question

Hi,

I'm attempting to implement a similar animated "sliding panels" effect as the Aveda website.

I'm a little overwhelmed by all the options and Javascript libraries that are available. And a little confused after examining the Aveda website code.

Any recommendations as to how to approach this task please? Which Javascript/Effects library would be most suitable? I don't have any allegiance or greater experience in one library over the other.

My requirements are:

• Cross-browser compatibility (of course)
• Simple & Elegant implementation
• Don't want to re-invent the wheel
• Ability to animate and to be activated by mouse-clicks (like the Aveda front page)
• Dynamic (don't want to have to modify javascript as more 'panels' are added)

My first impressions would be to use Scriptaculous - Effect.Move, but I'm aware that there are ready-made implementations like Spry's.

Any words of wisdom and suggestions would be greatly appreciated by this Javascript newbie.

Prembo.

Answer 1

http://jqueryfordesigners.com/coda-slider-effect/ is a good tutorial for this using jQuery.

Answer 2

I like http://www.davidmassiani.com/horinaja/

It can use the mousewheel aswell as the links to scroll between panes, and it's available for script.aculo.us and jQuery.

I would recommend the latter as it is lightweight and easy to learn/handle.

Answer 3

Hi Prembro,

I do like the way Aveda implemented that effect. They are using prototype/scriptaculous, and it is a custom implementation.

The Aveda effect is called a carousel. The Aveda carousel scrolls to the next element on a timer and has a nice non-linear transition.

+1 to Deefjuh, I think that Horinaja would do what you want and be easiest to implement.

If you want more of a challenge, I've used PrototypeUI ( http://www.prototype-ui.com/ ) Carousel to do a series carousels for project (e.g. http://teacher.scholastic.com/products/classmags.asp ) But the dot indicator controls had to be custom programmed.