madrobby / scriptaculous

script.aculo.us is an open-source JavaScript framework for visual effects and interface behaviours.

Home | Edit | New

Effects

The Visual Effects library (effects.js) includes all you need to add advanced JavaScript animation to your web site or application.
All animation is time-based, not frame based. So, if you tell an effect to last exactly one second, it will do so, regardless of the rendering speed of the browser. And it’s compatible, meaning all this stuff works on Firefox, Internet Explorer, Safari, the iPhone and many other browsers.

The library’s Core Effects, Combination Effects (a combination of core effects) and Effect queues (a representation of timelines to create series of effects) are powerful tools to create appealing animations.

Quick Demo

Source code of this demo


<div id="morph_demo" style="background:#cccccc; width:100px; height:100px;"></div>
<ul>
  <li><a href="#" onclick="$('morph_demo').morph('background:#00ff00; width:300px;'); return false;">Click me for a demo!</a></li>
  <li><a href="#" onclick="$('morph_demo').morph('background:#cccccc; width:100px;'); return false;" >Reset the demo!</a></li>
</ul>
Last edited by joe-loco, Sat May 10 14:53:49 -0700 2008
Home | Edit | New
Versions: