Javascript Visual Effects

Posted by Roan Lavery on Aug 7

Despite the fact that I've become more comfortable with writing and implementing Javascript myself over the last couple of months, I'm still not above taking advantage of all the cool things that other people have come up with.

I've just come across the excellent resource script.aculo.us. Silly domain name aside (damn you del.icio.us) it totally rocks.

Describing itself as "easy-to-use , compatible and, ultimately, totally cool JavaScript libraries to make your web sites and web applications fly, Web 2.0 style" it pretty much says it all.

So far I've been using it for the visual effects that allow you to manipulate HTML elements in response to user interaction. You can fade in bits, make other bits drop down or disappear with a puff. The best way to understand it is to check out the demos on the site, or have a look at my first attempts below. It's nothing earth shattering in terms of functionality but it offers some interesting possibilities for navigation in a site.

Integrating these new effects with your own site is simple too:

  • Download the various Javascript files and save them in a directory on your site.
  • Link the files into your site in the usual way.
  • Access the effects by calling the functions or simple event handlers.

Trying it out myself, I was waiting for the catch, you know, that bit where you realise getting this to work yourself was going to be much harder than you thought. But it never came. Within minutes you'll be able to utilise all these cool effects yourself.

Suntrap Garden Thumbnail
Suntrap Garden Thumbnail
Suntrap Garden Thumbnail
Suntrap Garden Thumbnail

These are just my first attempts after playing about for a day, and there are still some glitches in the implementation, but you can see the potential for jazzing up web interface with these little babies.

The danger, as always, is that fancy effects will get in the way of usability, but used responsibly I think these can add an extra dimension to the way users interact with a site.

There's more to the script.aculo.us libraries than just visual effects too, with other libraries allowing you to create drag and drop objects, and sortable lists as well.

Lots to get experimenting with!

2 Comments for Javascript Visual Effects

Alan - 9 August 2006

I went to the Javascript Libraries Panel at @atmedia2006 this year and DJANGO sounds like it could be good.

You can compile your own master script so to speak that has the bits you want in it as opposed to having redundant code.

I too am tinkering with modern day javascript although my focus has been on working with wordpress and front end coding. Finding the time to learn new coding is getting slimmer since I have gone out on my own too. I do own a copy of DOM Scripting by Jeremy Kieth and also DHTML Utopia by Stewart Landridge and they are on my read list.

Oh yeah, moo.fx is another one worth checking out, I like the accordian effect ;-)

Anyway, enough commenting on your site… back to some coding…

P.S. The little comment window could do with being a little wider IMHO

andris - 10 August 2006

i see lightbox.js and good css, so seek out jquery.com and http://jquery.com/demo/thickbox

FreeAgent sign-up