Create Your Own Ajax Effects

The basic and prebuilt effects in script.aculo.us are nice, but if you really want to build something great why not investigate doing your own, homegrown, do-it-yourself effects. We’re going to show you how to take basic effects and build on them to create your own. So let’s get going.

First, download and include Prototype and script.aculo.us on your page as described in the installation instructions.

You’re ready to use the visual effects engine now! Give this short line a try:

<div onclick="Effect.Fade(this)">Fade me already!</div>

To tweak the effect, try something like this:

<div onclick="Effect.Fade(this,{duration:3})">Fade me slower!</div>

The cash register effect

You’re now ready to start building your own effects. All the pre-built effects in script.aculo.us really are about changing the style of elements, but there’s nothing to stop you from actually manipulating the contents of elements too. For our homegrown effect, we’ll do exactly that.

Say you have an online shop that uses AJAX for adding and removing products from a shopping basket. Of course, you may display a total for all the products in the basket, that gets automatically updated each time something changes. We want to give the user a clue that this total is correctly updated and reflects the current contents of the basket. You could use the Yellow Fade Technique, but we want to bring our own style in here and use something more snazzy.

So, we want to emulate the look and feel of an old cash register, and display the change in the total with a completely new homegrown effect, that dynamically adjusts the value from the old total to the new.

Without further ado, here’s a demo so you know what I’m talking about.
Plus you can download a zipped example (20KB) to follow along (it includes all the files you need).

Have a plan

To make use of the facilities the effects engine provides, you should sit down and think about what your effect really does. The important thing is to come up with a method that renders exactly one specific frame as the effect engine will ask your method to do that.

For our cash register effect that means that for the duration of the effect, on each rendering of a frame, it should display the result of the expression start_price + (price_delta * position), where price_delta = end_price - start_price and position refers to how far the effect is completed in a 0 to 1 range.

Example: Assume that the total currently displayed is $100.00 and we want to change that to $150.00. The value to display on position 0.5 (halfway through the effect) would be $125.00 or $100.00 + ($50.00 * 0.5) with price_delta = $150.00 - $100.00 = $50.00.

First frame (position 0):       <span id="total">$100.00</span>
Halfway-through (position 0.5): <span id="total">$125.00</span>
Last frame (position 1):        <span id="total">$150.00</span>

Effect skeleton

The visual effects engine provides a base class to build your own effects.
Effect.Base is used like this:

Effect.CashRegister = Class.create();
Object.extend(Object.extend(Effect.CashRegister.prototype,
Effect.Base.prototype), {
// we’ll fill this up later
});

Next, we need to tell our new effect what to do.

The initialize() method

As dicussed earlier we want to have a transition from one price to another, and
need to find out the delta before we start the effect. For convinience, we also just
want to take the value that’s displayed in the element as a starting point, so we
won’t have to remember the “old” price:

Read Full Tutorial