Question

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

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.