July 2011
Intermediate to advanced
276 pages
5h 11m
English
Here we will learn to use fly-in text that bounces into place with a stretchy, elastic feel to it.
Prepare by using the same HTML markup as the previous recipe.
In the previous recipe, using Fx.morph via the enhanced element properties like this, Element.morph() gave us a simple way of morphing multiple-style properties. Add the optional secondary argument to the method to alter the duration and transition type.
window.addEvent('load',function() { var options = { duration: 5000, transition: 'elastic:out' } $('flying_div').set('morph',options); var new_pos = $('place_holder').getPosition(); $('flying_div').morph({ 'opacity':[0,1], 'left':new_pos.x, 'top':new_pos.y }); }); ...