O'Reilly logo

MooTools 1.3 Cookbook by Jay Larry G. Johnston

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Making active elements on a ribbon bounce

Ribbons often have a bouncy effect for an active element; let's make our elements bounce.

Getting ready

The previous two recipes set up the hard work for this recipe where we simply add a bouncy effect to the roll-over images. Review those for more information on how to create a slide-in ribbon and links that grow and shrink with the mouse movement of the user.

How to do it...

Transitions are what make MooTools really far superior. Use them in this recipe to make the growth and shrinkage quick and make them bounce!

// make the growth and shrinkage quick // and make them BOUNCE! $$('#ribbon a img').set('morph',{ duration:'long', // i can has mmm bop? transition:Fx.Transitions.Elastic.easeOut }); // add the ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required