Wednesday, April 19th, 2006 Create your own Ajax effects

Category: Articles, JavaScript, Prototype

Thomas Fuchs has written an article on creating your own Ajax effects.

The article goes beyond the builtin effects that has, and shows you how to create your own. The example used is a cash register effect that counts between amounts as the register changes.

The end result is a nice easy effect that you can use:


  1. new Effect.CashRegister('total',150,{duration:10});

Then you can explore callbacks to do further processing, transitions, effect queues, and more.

Posted by Dion Almaer at 8:47 am

3.6 rating from 99 votes


Comments feed TrackBack URI

Is anyone else getting tired of Javascript articles having the dreaded buzzword in places where “Javascript” really belongs? They weren’t synonymous the last time I checked.
Thomas himself even clarifies that it’s really about effects “for supporting Ajax-driven websites” in the comments. Still, nice article.

Comment by Jonathan Buchanan — April 19, 2006

I’m with you Jonathon. The new Vitamin site has an Ajax category but none for JavaScript. Is JavaScript now a subset of Ajax?

All hail our new Ajax overlords. ;-)

Comment by Dean Edwards — April 19, 2006

Amen, Jonathan and Dean. Given the way things are going, I might as well jump the shark on this – Ajax sound is probably up next. ;)
XHR isn’t involved in animation (adjusting .style.left/top/width/height, etc.) .. but I can also understand the desire to market/sell it to the masses.

Comment by Scott Schiller — April 19, 2006

yawn…more eye-candy.

Comment by hejaxmeoff — April 19, 2006

Wonderful, amazing, terrific, wow and all!
Now all it needs is a practical use case or a need for it.

Seriously, what is the benefit of a counter that counts up to a final number? I’d be well annoyed to have to wait for a basket for several seconds counting up to tell me the final amount I have to pay, and I doubt that any client would get more revenue from it. More hits, possibly, with web designers going “wheee” adding and deleting numbers and stopping before checkout.

I don’t get it. Wollzelle prove with their fluxiom product that the stuff they develop in scriptalicious can make a pretty nifty application but all these bells and whistles examples will just lead developers and designers to make interfaces slower and more complex than necessary.

It took us some years to get rid of the animated rainbow dividers, ticker scripts, rotating globes and @ signs, now we do the same with another technology. Heck, even in Powerpoints people are bored of animations.

I am not saying that all animation is bad, there are good examples that help the flow through the application but I dare anyone to tell me a useful application for this example other than proving you can use a timeout to animate stuff.

Comment by Chris Heilmann — April 19, 2006

For the love of God, JavaScript animation and fx is not AJAX!
[ ]

Comment by Fernando Lucas Lins — April 19, 2006

For the record: I commented on the page itself and as an introduction how to extend scriptalicious with your own effects, this is a very good article. It is unfortunate that the example is of debateable value as an interface element and that the article is labeled AJAX.

Thomas’ idea was to explain how to write an own bespoke scriptalicious effect _for_ an AJAX application, so let’s stop bickering at the bad labeling and just learn from it.

Comment by Chris Heilmann — April 19, 2006

Never mind my scriptalicious, we talk about of course.

Comment by Chris Heilmann — April 19, 2006

and so say all of us. I’ve been wondering what the deal was with labeling everything as Ajax. I guess I’m not alone in that. /me goes back to drinking Aja^H^H^H…coffee…

Comment by Kae Verens — April 20, 2006

I like it. As far as apps using this gizmo, I’ve seen it used on the TurboTax site just recently. It draws user attention to the fact that the number has changed. It does have an advantage over simply changing the total number.

Comment by Anupam — April 20, 2006

The example is a bit extreme in its implementation. Certainly having to wait that long for the total to be presented to the user is annoying.

But it doesn’t mean the idea itself is without practical use. You could do a similar effect but with a much shorter duration (e.g. you reach the total in under 0.5s) and that would probably feel nice.

Anyway, as Chris said, as a tutorial it is a good article.

Comment by Gonzalo — April 20, 2006

You mean like in
new Effect.CashRegister('total',150,{duration:0.5});

Duration is a standard option on scriptaculous effects, you get it for free.

Comment by Martin Bialasinski — April 20, 2006

Just wanted to agree with everyone that is tired of the whole JavaScript == Ajax thing. Drives me batty to see people say “oh, look at that ajax!” You can have a site that uses ajax yet looks as if it doesn’t, and vice versa. Oh well, the way I look at it is that it helps me know which people know what they are talking about as opposed to those that are just blowing smoke.

Comment by Jason Bunting — April 20, 2006

I believe all this stuff should just be called DHTML like it always has been.

Comment by Anonymous — April 27, 2006

Check out

The relies heavily on AJAX and uses many aspects of the library.

Comment by Ron — June 27, 2006

Leave a comment

You must be logged in to post a comment.