Thomas Fuchs
Hi, I'm Thomas Fuchs. I'm the author of Zepto.js, of script.aculo.us, and I'm a Ruby on Rails core alumnus. With Amy Hoy I'm building cheerful software, like Noko Time Tracking and Every Time Zone and write books like Retinafy.me.
   Want me to speak at your conference? Contact me!

Fun tricks with the prototype Effects

May 5th, 2005

Here are some hints and tricks for using the prototype effects.

(Note that my Typo CSS styles make some of the examples not work too good here. But you get the basic ideas. Play around yourself!)

Trick #1:
Using em units to allow Effect.Squish to scale text and child elements.


Testing Effect.Squish—click me!

I’m big!

HTML for this:


<div onclick="new Effect.Squish(this)"
  style="font-size:1em;border:1px solid #888;
  background-color:#eee;
  line-height:1em;padding:1em;width:50%">
    <span style="font-size:1em">
    Testing Effect.Squish -- click me!
    </span>
    <div style="margin-top:0.5em;margin-bottom:0.5em;
    width:5em;height:2em;font-size:2em;
    background-color:#888;color:white;text-align:center;">
       I'm big!
   </div>
</div>

Trick #2:
Using multiple effects on one element.

Click me to do a Appear
and Scale at the same time!

Code:

<div
  onclick="new Effect.Scale(this, 150); new Effect.Appear(this);"
  style="background-color:#eee;width:50%;font-size:1em;">
  Click me to do a Appear <br/>
  and Scale at the same time!
</div>

Trick #3:
Mix em units and px units for great Scale usage.

(move your mouse here)

I don’t get scaled
I get scaled!

Code:


<div onmouseover="new Effect.Scale(this, 120)"
  onmouseout="new Effect.Scale(this, 100)"
  style="width:50%;border:1px solid #888;
  background-color:#eee;padding:0.5em;">
    (move your mouse here)
    <div style="font-size:12px">
       I don't get scaled
    </div>
    <div style="font-size:1em">
       I get scaled!
    </div>
</div>

(Hmmm. Looking at what happens here, I guess there’s a bug in Effect.Scale. I’ll fix that soon.)