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

Welcoming users in a flashy way: flying in text smoothly

In Chapter 4, That's Not All Folks: Animation and Scrolling, using MooTools More, we slid in text using Fx.Slide. This recipe shows how to slide in text with only the MooTools Core and not the More.

Getting ready

Plan the final size and destination of the message and nest it within a parent element that can hold the position while the message is moved absolutely in the DOM. Position the flying DIV absolutely and off to the top left of the page.

<div id="main"> <div id="place_holder"> <div id="flying_div">Hooray, you are here!</div> </div> </div> <style type="text/css"> #main { width:600px; margin:auto; } #place_holder { margin:auto; width:300px; height:100px; } #flying_div { width:300px; ...

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