July 2011
Intermediate to advanced
276 pages
5h 11m
English
Ribbons often have a bouncy effect for an active element; let's make our elements bounce.
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.
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 ...