Introducing script.aculo.us - Visual Effects
(Page 2 of 4 )
The most popular component of script.aculo.us is its Effectobject, which is used to attach a variety of cinematic effects to UI events. Using script.aculo.us effects, many of the slick animated transitions that people have come to associate with Flash can be accomplished without plug-ins at all, and in a way that preserves the benefits of HTML.
What about cross-platform compatibility? In general, the script.aculo.us visual effects work reliably across different browsers (Internet Explorer 6+ for Windows, Firefox, Safari, Konqeror, Camino, and, with a few exceptions, Opera). And because the animated effects are time-based (as opposed to frame-based) they work consistently on systems of different speeds. You might be wondering: just because visual effects are easy, does that mean they’re a good idea? Isn’t it just eye candy? And what does it have to do with Ajax, anyway?
The full answer to those questions will come in Chapter 6, but here’s the short one. More than just mere decoration, visual effects can be essential to providing a good user experience, especially in conjunction with Ajax. For more than 10 years, users have gotten used to the way the Web works, and Ajax undermines many of their expectations. For example, there’s a basic expectation that web pages are static, that they won’t change once they’re loaded. But in the last chapter, all the Ajax examples made changes to the page without reloading, which has the potential to become confusing. To address that, visual effects can provide cues that make the interface more natural and discoverable.
A word of caution: just like special effects in the movies, script.aculo.us effects are generally best when you don’t notice them—when they are subtle and unobtrusive, they and contribute something to the plot. Remember when desktop publishing arrived in the 1980s, and every neighborhood newsletter suddenly used 10 different fonts, because it could? If at all possible, try not to get similarly drunk on the power of script.aculo.us.
The script.aculo.us’Effectobject is where the magic resides. Let’s look at it. First, we’ll need an element to try our effects on, so add one to the top of the new index.rhtml:
<div id="target" class="green box">
div>Here's a DIV with some text.</div>
</div>
Now let’s use thelink_to_functionto call an effect on the new element. Add this below theDIV:
<%= link_to_function "Fade", "new Effect.Fade('target')" %>
Remember,link_to_functiontakes two arguments: the first is the text for the link, and the second is a JavaScript statement to be evaluated. In this example, that statement is a method call on script.aculo.us’Effect.Fade. Load the page in your browser and try out the link—you should see the target element slowly fade away, until it’s removed from the page flow altogether. Internally, the first argument toFade()is passed through Prototype’s$()function—which means you can pass it either the ID of an element or an element reference itself.
There’s another way to trigger effects, thanks to the fact that Prototype’s Element methods are added to every element that is accessed via$(). That means you can callvisualEffectdirectly on a DOM element:
$('target').visualEffect('fade')
script.aculo.us has five core effects that control fundamental aspects of an element:Opacity,Scale,Move,Highlight, andParallel. To get a feel for each:
<%= link_to_function "Opacity",
"new Effect.Opacity('target', {to:0.5})" %>
<%= link_to_function "Scale",
"new Effect.Scale('target', 200)" %>
<%= link_to_function "Move",
"new Effect.Move('target', {x:50,y:10})" %>
<%= link_to_function "Highlight",
"new Effect.Highlight('target')" %>
<%= link_to_function "Parallel",
"new Effect.Parallel([
new Effect.Move('target', {x:50,y:10}),
new Effect.Opacity('target', {to:0.5})
])" %>
In your application, you’ll usually use combination effects, which are composed of the core effects—often by means ofEffect.Parallel. script.aculo.us includes 16 standard combination effects, but you can define as many new ones as you like. Here are the standard ones:
Fade Appear | Gradually decreases or increases an element’s opacity. Once a fade is finished, the element’s display property is set to none, so the rest of the page will reflow as if it’s not there. |
BlindUp BlindDown | Works like Venetian blinds: gradually changes the height of the element, leaving the contents of the element fixed in place. |
SlideUp SlideDown | Similar to BlindUpand BlindDown, except that the contents of the element appear to slide up and down with the element. Note that unlike the other combination effects, the slide effects require a wrapper DIVsurrounding the content inside of the target DIV. |
Shrink Grow | Resizes the entire element, including its contents, from the center point. |
Highlight | Changes the background color of the element (to a pale yellow by default), and then gradually returns to the previous color. Commonly used when you need to draw the user’s attention to part of a page. |
Shake | Causes an element to slide left to right a few times, commonly used to indicate that an element is invalid. |
Pulsate | Rapidly fades an element in and out several times—a modern twist on the much-beloved <blink> tag. |
DropOut | Simultaneously fades an element and moves it downward, so it appears to drop off the page. |
SwitchOff | Simulates an old television being turned off: a quick flicker, and then the element collapses into a horizontal line. |
Puff | Makes an element increase in size while decreasing in opacity—so that it appears to dissolve into a cloud. |
Squish | Similar to Shrink, but the element’s top-left corner remains fixed. |
Fold | First reduces the element’s height to a thin line and then reduces its width until it disappears. |
To try out all the standard combination effects, you could write a link for each one. Instead, let’s keep things DRY by iterating through an array instead:
<% %w( Fade Appear Highlight Fold Pulsate SlideUp SlideDown
Shrink Grow Squish Shake DropOut SwitchOff Puff BlindUp
BlindDown ).each do |name| %>
<%= link_to_function name, "new Effect.#{name}('target')" %>
<% end %>
Next: Toggling >>
More Ruby-on-Rails Articles
More By O'Reilly Media
|
 This article is excerpted from chapter four of the book Ajax on Rails, written by Scott Raymond (O'Reilly, 2007; ISBN: 0596527446). Check it out today at your favorite bookstore. Buy this book now.
|
|
