Web 2.0 Effects with Scripts

Web 2.0 is all about rich effects and dynamic Web pages. Many script-based
frameworks and libraries alike allow you to do all those flashing, morphing and
add a lot more effects with ease. script.aculo. us is one such library that has
scripts for many of the rich interface effects that you will always like to have
into your website/pages. We look into how to use it for creating a page with Web
2.0 effects.

First step

Download scripts library from the URL mentioned. It will be in a compressed
form; install it by extracting the files to a location on the hard drive. There
are two versions available-1.6.5 and 1.7.0 beta 2 with morphing. The libraries
provide with animation effects, drag and drop, DOM (Document Object Model), AJAX
and unit testing also. To start-off copy all the scripts in the 'src'
directory under the root directory and the 'prototype.js' in the 'lib'
directory to a directory in your Web application. That's about it! You are
ready to use the scripts.

Sample page

We will build a page with a few of the animation effects that the scripts
provide. You need to import the scripts to your page/document. Here's how to
do this.

Let us now add a blind up effect to one image; and a 'puff' effect to the
text. Here is how we do it.

Once you globally import the scripts on your page, you can go for any effect
that they offer. There are more effects that can be generated; that you can find
in the demos section on the site. So you see, effects are not limited to movies,
games, flash and the like. These lightweight components are a great way to touch
up Web pages without much effort.

You can add effects to both images and text alike using simple inline function calls. Here the image on the left is sliding from top to bottom and the one on the right is fading in from a background