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 ...Get MooTools 1.3 Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
