Advertisment

Web 2.0 Effects with Scripts

author-image
PCQ Bureau
New Update

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.

Advertisment

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.

Direct Hit!
Applies To:

Web developers



USP: Add effects in websites using script.aculo.us scripts


Primary Link: http://script.aculo.us




Google Keywords: script libraries


On PCQ Professional CD: Developer\script


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.

Advertisment





Let us now add a blind up effect to one image; and a 'puff' effect to the

text. Here is how we do it.







Advertisment




I'm ready to rock !!!!







align="center">
Advertisment













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

Advertisment