Making usability cool with fading font-size changer
There are many different ways to change fonts on a page. Using MooTools allows us a fancy variety of options. Use morphing to smoothly transition from one text size to the next.
Getting ready
To be ready to transition font size, the layout must be liquid. A liquid layout is one that can grow without breaking the display. Create styles that would alter the size of the text.
<div id="main" class="medium"> <form action="" method="get" id="font_sizer"> Choose text size: <input type="button" id="small" value="S"/> <input type="button" id="medium" value="M" disabled="disabled"/> <input type="button" id="large" value="L"/> </form> <h1>Welcome!</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing ...
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.
