10 JavaScript Effects to Boost Your Website’s Fanciness Factor

Mar 18 2008 by Jacob Gube | 109 Comments

leading photo - Fireworks 1 - by  AMagillThere comes a point in time where we want to improve our website’s interface or provide a captivating experience that our users will remember.

We have three main options (from hardest to easiest): write the scripts ourselves, use a JavaScript framework such as jQuery or mootools (which will make coding easier), use a pre-made script that works with existing JavaScript frameworks or that the author has developed from scratch. This article’s for the individuals who chooses to make things a bit easier and those who don’t want to re-invent the wheel.

Here’s a collection of 10 powerful yet easy-to-implementJavaScript effects to supplement your web page’s interface. These were picked using a “bang for your buck” methodology; meaning that these effects were chosen specifically because they provide high-impact effects with very little effort in installing and using them.

Author’s note: Title of this article, by request, was changed to reflect the content featured in this list. I apologize for the confusion this may have caused, and better quality control will be implemented in subsequent articles.

1) GreyBox

graybox screenshotGreyBox allows you to launch other websites in a modal window (like a pop-up window, but it doesn’t open another browser). This is great for when you’re linking to multiple websites and don’t want the user to navigate away from your web page or to open another browser window that might be blocked by the user’s browser. Using GreyBox is easy and involves a 3-step process outlined in the web page.

Here’s some key pages regarding GreyBox: Download page, Documentation, Examples, Installation, and Advanced Usage (for the more experienced JavaScript’ers, check this page out for tips on how you can extend the library’s functionality).

2) instant.js

instantjs screenshotinstant.js effect dynamically adds a Polaroid-like effect to your images (it tilts it and adds a border with a drop shadow), simulating this popular image technique without having to use a digital-image editing application such as Photoshop.

This can be utilized for when you’re applying this popular visual technique on multiple images and you don’t want to manually edit the pictures yourself (you can probably batch process, but that’s really only effective for simple actions such as resizing images, cropping uniformly, etc.).

3) mooTable

mooTable screenshotmooTable allows you the ability to provide sorting of table data ( without a page refresh) by utilizing the DOM instead of requesting the data again, sorted another way. Implementation is simple, and configuring the sorting of tables is a breeze.

This library needs the mootools framework, which you can download here. You can also find a forum post on the mootools boards by the author of mooTable, with feedback from other mootools developers.

4) FancyForm

FancyForm screenshotFancyForm replaces boring form controls such as radio buttons and check boxes, with fancier ones. The basic implementation is a two-step process: (1) include JavaScript files on the web page, and (2) assign your form controls the class="checked" or class="unchecked" for checkboxes and class="selected" and class="unselected" for radio buttons. Very unobtrusive JavaScript.

This script needs mootools as well (and was developed for version 1.1).

5) image menu

Phatfusion image menu screenshotimage menu, developed by phatfusion, is a spiffy horizontal menu that expands when you hover over menu items (such as images).

You can use this for displaying a montage of images that are each partly hidden, but that the user can reveal fully by hovering over it.

This script needs mootools as well (and was developed for version 1.1)

6) AmberJack: Site Tour Creator

AmberJack Site Tour Creator screenshotHere’s a lightweight JavaScript library that allows you to create a scripted website tour, allowing users to visit key web pages in real-time with a small description box on each page.

This allows users to take a tour of the various sections of a website, without them having to view a static demo created in flash or some other method. Extra bonus, you can download various “skins” or even create your own, to match the look and feel of your website. Here’s the skins gallery so you may see if they have a theme that doesn’t clash with your website.

7) ImageFlow

ImageFlow screenshotInspired by iPod’s “coverflow”, ImageFlow is a simple effect that displays a collection of images that the user can scroll there using a scroll bar at the bottom of the image set. Advanced developers can probably modify the slider to spruce it up a bit more.

When the user clicks on an image, it re-directs them to another web page with the image displayed, so an excellent idea would be to use this in conjunction with a modal box script to open the image instead.

Update: Just now, the author of ImageFlow emailed me announcing ImageFlow version 0.9. Check it out here (it fixes the issue of the image opening another browser window when clicked, and it works with Lightbox compatibility). Thanks for the update Finn!

8) ShadowBox.js Media viewer

ShadowBox.js Media viewer screenshotShadowBox is “a cross-browser, cross-platform, cleanly-coded and fully-documented media viewer application written entirely in JavaScript” (wow that’s a mouthful, isn’t it?).

What distinguishes shadowbox from the plethora of other modal boxes out there like Lightbox 2, is that it supports other file types besides images, such as a flash videos, embedded youtube videos, Apple.com Trailers, and web pages (a log-in page for example, that saves the user a trip to another page just to log on). Worthwhile script to test and play around with.

9) TJPzoom 3 – image magnifier

TJPzoom 3 image magnifier screenshotTJPzoom allows you to zoom in on particular sections of a high-resolution image. Holding down the mouse button and dragging up or down, can decrease or increase the zooming of the image magnifier tool.

One way of utilizing TJPzoom is to scale high-resolution pictures down to fit a web page, and then allow the users to zoom into parts of the image using the magnifier tool.

10) mootools Tips

mootools Tips screenshotmootools Tips is part of the mootools framework that allows you to provide a highly configurable way of showing tool tips to the user; when the user hovers over a link or image, additional information about the element appears on the screen.

Some options that you can tweak are the: CSS styles (to make it look different from the default black background and white text), transition speed, style of how the tool tip appears on-screen, and how long you want the tool tip be displayed. This requires the mootools framework.


J. Arthur

March 19th, 2008

Instant.JS sounds really useful. Thanks!


March 19th, 2008

If I see another badly implemented Lightbox site I’m going to leave the site. Really, just because you *can* open something via a Lightbox, doesn’t mean you should and null all the navigation on the page until the user closes it…it’s like a pop-up, and people don’t like pop-ups, remember?

(don’t get me started on top 10 lists on Digg…opps!)


March 19th, 2008

These are great effects. There’s one problem though… Most of them, if not all, aren’t considered AJAX code.

Please look up the definition of AJAX before you even use the term. It’s a shame “AJAX” is in your list of blog topics and you don’t know a thing about it.


March 19th, 2008

mootools on its own is a good start. It’s nice to see it being recommended as it really is a damned measure better than the standard prototype garbage floating about.


March 19th, 2008

These aren’t AJAX effects because there is no such thing as “AJAX effects”.

Jacob Gube

March 19th, 2008

@Anonymous: Thanks for the feedback, I was concerned that I didn’t make that clear enough (I emphasized the “effects”). I’ve added an edit to the final copy.

@AJAX: Well, I use this term as “unobtrusive (in most of these at least) JavaScript associated with AJAX techniques”. The concepts are the same, no page refreshes and manipulation of the DOM (in most cases anyways). I just didn’t want to name the article “10 Unobtrusive JavaScripts Associated with AJAX Techniques to Boost Your Website’s Fanciness Factor”. “AJAX effects” was the best I could come up with.

I apologize for the misunderstanding.



March 19th, 2008

1) title should be “10 mootools effects…”
2) 99% of this list is NOT ajax


March 19th, 2008

thx for this article.

but the “Ajax” guy is right. Those are only js gimmicks


March 19th, 2008

Yup sad to say that there’s not much Ajax here.

Johnnie Walker

March 19th, 2008

Why didn’t you mentioned Dojo?

Kevin Quillen

March 19th, 2008

dojo is ‘meh’

Kevin Quillen

March 19th, 2008

The author isn’t entirely wrong either, these are javascript methods to enhance AJAX you may have going on to build into your functions.

Jacob Gube

March 19th, 2008

Hello all,

Just to add a few more notes.
- My affection for mootools can certainly be seen in this list.

- To all the jQuery fans out there, I’ve recently picked up jQuery two weeks ago, so see a little bit more love in the upcoming articles. I’m also going be using jQuery on my upcoming web application that will be released for public beta (hopefully! I’m behind my other duties such as updating the Six Revisions design) within this month.

- Again, I’d like to re-iterate the fact that I am aware there is aren’t any real AJAX techniques going on, but rather that these can be used in conjunction with AJAX, and that they are effects that can be viewed as part of look-and-feel of AJAX-rich applications. I use the term “AJAX effects” very liberally, not literally. I’ve appended the article to make this clearer.

Your feedback, negative or positive, is always welcome, as it will only help improve the quality of information that will be provided in subsequent articles.



March 19th, 2008

Love the way that you can flick through the images on ImageFlow with your mighty mouse scroll ball.


March 19th, 2008

Imageflow looks pretty sleek, can’t wait to implement that with some site.

Mike Rundle

March 19th, 2008

Do you know what Ajax means? Please only use the term Ajax when you’re pulling in data via the xmlHTTPRequest object, otherwise everything else…… uh oh you ready for the mid-90s term…… DHTML. Using Javascript to animate things on a page. People have been doing this before the word Ajax was ever invented and it does the industry a disservice when people throw it around as if everything “fancy” on a page is done with Ajax.

#1 pet peeve of all-time for web people who actually know and program Ajax is to see people throw it around without knowing what it is.

Jacob Gube

March 19th, 2008

@Mike Rundel,

Point taken, and although I did refer to it as AJAX effects, a term I coined whilst writing the article, instead of simply just “AJAX”, I do understand that the term can be misunderstood.

Again, what I mean by “AJAX effects” is noted several times in the comment section as well as my author’s note.

Thanks Mike.

- Jacob


March 19th, 2008

Have you checked out ProtoFlow (www.deensoft.com/lab/protoflow)

it even has auto reflection and stuff!

Michael Müller

March 19th, 2008

Great list! Very useful! I was looking for something like FancyForm for a while!


who cares

March 19th, 2008

God, all you Ajax Snobs out there – shut the hell up!!

You’re all giving the author so much crap about him using the term “Ajax” to title this article; don’t you have better things to do with your time?

Jacob went to the trouble of writing this article so as to share some great resources with everybody. Get off your high horse about the nomenclature. He’s not doing anyone a “disservice” by including the word Ajax, gimme a break!! You all need to loosen the grip on your sphincters and thank Jacob for writing this article. Otherwise, shut up and go somewhere else.



March 19th, 2008

Although everyone is bashing you about the specifications of AJAX, it is still a great list. I think it will give people different tools, when creating their interface.

Andy Bryant

March 19th, 2008

Alongside shadowbox.js, highslide.js (http://vikjavev.no/highslide/) is well worth a mention, with the capability to show content from other web pages, AJAX content and Flash content as well as images. There’s loads of configuration options, and I’ve found it a breeze to implement.

It’s also accessible, allowing you to provide alternative behaviour if JS is switched off.

CFA Level 1

March 19th, 2008

Thank you alot for these effects. Very useful indeed.


March 19th, 2008

thanks for this the slide thing is useful to me


March 19th, 2008

Number 1 pet peeve is people throwing their smugness around Mike Rundel, what a jackass!


March 19th, 2008

I second ‘Who Cares’ comment. Especially since the author stated in the original article, “Please keep in mind that most of these don’t have real AJAX going on, but simply effects that are associated with AJAX techniques.”

Very cool list of tools, thanks.


March 19th, 2008

Isn’t it strange that this website doesn’t use any of these tips ;)


March 19th, 2008

ImageFlow is exactly what I have been looking for. I think I’ll start working on a way to get it onto my page at CHVNX.COM right now! Thanks man!

By chance, does anyone know of a good text fader script that is easy to use? I want text to fade into another color when I hover a link, not just instantly change colors.

I used to have a script that did this with the color red. I’d love to have it again!


March 19th, 2008

I tried to use mootools at one point, but the lack of good, organized documentation quickly got me away from it… I found jQuery and I was sold… When attempting to work with a new framework, in my busy schedule, I don’t have the time to go figure out what the code is doing… I need to good documentation to come with it. Never the less, these affects are very good.


March 19th, 2008

If it hasn’t been mentioned already, also check out MoodalBox (http://www.e-magine.ro/web-dev-and-design/36/moodalbox/) as an alternative for lightbox. It does actual AJAX retrievals and posts, and supports all of the pretty MooTools-driven effects also.


March 19th, 2008

Who Cares is correct – stop with the hating – it only makes you look like a fool. He took the time to write this up in hopes that someone can walk away with something useful ( which I did – Thanks! ). If you don’t like it shut up or write your own damn blog.

Jacob – thanks for your time in sharing and your restraint is amazing! Keep up the good work…


March 19th, 2008

Or, you could replace half of these with LightWindow:


It’s built on Prototype and Scriptaculous.


March 19th, 2008

Jacob Gube is the kindest soul (going by his responses) I have encountered over the internet. “Who Cares” is spot on.

David Thomas

March 19th, 2008

You forgot jQuery

Jacob Gube

March 19th, 2008

@Paul — I hear you about the lack of mootools documentation and tutorials. I guess the first place to start would be over at the //clientside blog, created by the very talented Aaron Newton (who works for CNET). I was going to write a comprehensive mootools starter guide until I saw Aaron Newton’s work, then I figured, no reason to re-invent the wheel. He also initiated and filled in (but don’t quote me on this), the docs Wiki on the mootools website.

But… although I love mootools, I am exploring my way towards jQuery, so I don’t think you can go wrong with either. jQuery’s awesome so I’m not going to sway you one way or the other (but say this conversation was 2 weeks ago, then this response might have been a lot different).



March 19th, 2008

I love GreyBox.


March 19th, 2008

Hi Jacob,

Great list, maybe next time you find some great resources to share you should title it ’10 Unobtrusive JavaScripts Associated with AJAX Techniques to Boost Your Website’s Fanciness Factor’ that way you will save the time it takes to read the stupid (repeated) posts from nerdstroms arguing over semantics.

Thanks for taking the time to share these tools.


March 19th, 2008

jQuery is all you need. For everything. Forever.


March 19th, 2008

Grea tips!!!


March 20th, 2008

Great scripts, but like people have said, most are not ajax…just js.

Jerry Kew

March 20th, 2008

Nice database effects.


Seriously though, I agree, you *should* use terms correctly, and javascript is not AJAX and AJAX is not javascript. I used to get upset when people described a ‘bucket of data’ as a database, because, being a database designer I felt my words were being hijacked. Eventually I learned to live with it, and more and more people use the term properly these days. If you can it would be nice if you could fix the name of the article.

I shall be using the shrink expand image menu (the phatfusion one) – a really nice tactile effect.



Andrew Rae

March 20th, 2008

It’s the first time i’ve heard about instant.js by netzgesta.de and I’m a JS freak! :)

Enjoyed this post.



March 22nd, 2008

I love mooTable! Very useful!


March 24th, 2008

Imageflow is brilliant!

Amberjack is handy for applicationy sites and fast to implement.

TJPZoom pixelates when you zoom in. I prefer Magic Magnify:



March 25th, 2008

Nice collection of javascript effects. I find it pretty useful. Thanks


March 25th, 2008


This script creates nice effect as well, works well with prototype and scriptaculous


March 28th, 2008

FancyForm is great! Unfortunately if you already use Prototype.js for anything, it and MooTools to not play well together. I ran into this, so I hacked up a version of FancyForm based on Prototype.js instead.

Fancy Form – Prototype.js Edition

Thanks for the nice list.



April 1st, 2008

I wouldn’t stick too religiously to terminology such as AJAX. I know what AJAX stands for, but it’s reasonable to use it as an umbrella term for Javascript effects.

The name AJAX isn’t even properly defined. Think about it. Asynchronous Javascript and XML. You may as well replace the X in AJAX with S for SQL. Asynchronous Javasript and SQL …

AJAX is a loosely defined term, and I reckon all these scripts can be classified under the umbrella term known as AJAX.

Michael Ott

April 1st, 2008

Thanks for that. There are some ones in there I didn’t even know about. Can anyone tell me definitively is mootools is worth it? I have seen some mootools scripts floating around designed to do trivial things – like a menu hover effect for example – which utilise tens of lines of javascript when I can achieve the exact same effect with a few lines of CSS.

My impression has always been that mootols is unnecessarily bloated but I haven’t really looked deep yet.

Thanks fort this page BTW.


April 10th, 2008

Lot’s of great effects and tools. jQuery Plugins…


April 15th, 2008

Great list of JavaScript UI effects!


April 21st, 2008

Thanks for listing just 10 good ones rather than 400 not-so-useful ones. Quality over quantity any day for me, or Quality and Quantity. So thanks for these!


April 21st, 2008

useful information.. but people need to remember that if you put all these effects on one page you would get a half meg or more page. That would just be cruel to our fellow dial- up users who would have to wait up to two minutes just for the page to load..

imageflow looks like fun!


April 24th, 2008

Nice list, man.

For those of you who are wondering whether Mootools is worth using, I say yes. Like Flash, or similar Web presentation “polish,” I recommend using it sparingly. It can be a problem if a user has JavaScript turned off in his or her browser, so you should code to accomodate as many users as possible. That being said, Mootools is a great set of tools for making your Site behave in a more slick way.

You tech school geeks who are dropping a line here for the sole purpose of correcting Jacob’s syntax – I think we all understand what he meant. Get a life.


April 24th, 2008

thanks for the tips. they are quite the timesaver.

Werbegaentur Ansbach

April 26th, 2008

No AJAX – right. But nice effects. Also check out the woork blog for mootools effects and of coure phatfusion!


May 22nd, 2008

Thank to this gret list! This is a very beautifull tips collection.


August 3rd, 2008



August 30th, 2008

Great summary, please keep it up, it has given me more inspiration, and I dont see y the big fuss over a misterminology, so what these are still good contents.

techniqueal t.

September 5th, 2008

Great List of JS Effects! Instant.js is my fave =)


October 10th, 2008

Yeah,… Great list of tools! Everyone seems to be so hung up on the term “AJAX”, but really, who cares! Its still a great list.. and similarly, the index of the title helped me find a new tool for my site. Good list, good job.


October 22nd, 2008

Nice tips with some great effects!


November 11th, 2008

Nice collection of javascript effects. I find it pretty useful. Thanks

Anonymous Coward

November 14th, 2008

Did anyone else mention that these aren’t really AJAX?
…just kidding! :)

GREAT list!

Thanks Jacob, I can use two of these effects immediately on sites I’m currently working on.


November 24th, 2008

thanks for the tips.


December 5th, 2008

thx for this article.

but the “Ajax” guy is right. Those are only js gimmicks

Website Development

January 23rd, 2009

This one is the great article :), thanx for sharing it.


January 25th, 2009

Hey they are great! Appreciate very much, keep up the good work.


January 27th, 2009

Pretty really cool! thanks for this post!

Web Design Liverpool

January 28th, 2009

Thanks for sharing this some good effects there, i particularly like the ShadowBox.js Media viewer one i’ve used this a few times on various sites.

Computer Geek

March 30th, 2009

Seriously, why are most software developers and designers so full of it? Just enjoy the resources and if you want “real AJAX” then code it yourself! Thanks for the list, as a designer i find these collections very useful for possible new projects.


April 7th, 2009

Thanks for the list, found a few that I didn’t know about that look interesting.


April 15th, 2009

Saying ‘Ajax effects’ communicates that they are effects done with Ajax.
Better to say ‘Ajax-like effects’.

I’m not a programmer although I’ve learned how to ‘plug in’ javascripts to a certain extent… can I insert the ImageMenu code into Dreamweaver cs4?


April 15th, 2009

Never mind… just found out it’s a Dw extension, I got it from adobe.

club penguin

May 19th, 2009

Just because you *can* open something via a Lightbox, doesn’t mean you should and null all the navigation on the page until the user closes it…it’s like a pop-up, and people don’t like pop-ups, remember?


June 21st, 2009

Heres a nice Slimbox AJAX script, its AWESOME!



July 14th, 2009

i,m so glad to using ur script in my website.thanks a lot


July 23rd, 2009

Great effects, very helpful for people like me who doesn’t know javascript. Thanks

Aaron Reynolds

July 28th, 2009

Thanks Jacob, I’ve made good use of Greybox since I noticed it in your article and I’m now using Shadowbox too. Greybox has become invaluable in my work so I’ll be checking back in case you come across any new and funky stuff.

Jacob Gube

July 28th, 2009

@Aaron Reynolds: Our dev team where I work is converting from Thickbox to Shadowbox, it’s really a great modal window solution, and what I love about it the most is its flexibility/customize-ability.


September 19th, 2009

The central topic of the web blog is web video and steaming. Here you will find large number of useful articles, web video howtos and guides and information about video hosting services.


September 24th, 2009

These are great effects. There’s one problem though… Most of them, if not all, aren’t considered AJAX code.

Please look up the definition of AJAX before you even use the term. It’s a shame “AJAX” is in your list of blog topics and you don’t know a thing about it.


September 28th, 2009

Thanks, though the list comprises of some great stuff not everything could be used on a website. The best of the lot for me was the “mooTable”. It really helped me.


September 30th, 2009

oh wow my post was deleted.
it took so long to type out too (sarc)

just coz i pointed out a few things awwww, i upset the author?


November 15th, 2009

@Ravi : Man first you learn to read whole post before claiming yourself an Idiot..

@Author : The post is Superb.. instant.js is awesome..
btw trying to apply all scripts and learning better in that part to make some of my own and place here.

I Wish that you continue the way you are doing.
Have A Nice Day


December 7th, 2009

Not Ajax, but still useful. most of them use iframe with js including greybox.

Doug Barned

December 8th, 2009

All the images in the post seem to of broken… Just so you know…

sno man

January 8th, 2010

excellent list – we’ll be trying some of them as we try to build a simple and well SEO-ed but user friendly PC version of our mobile site

Club Penguin

January 28th, 2010

These are some great tools to use when im going to start my new website or maybe i will even implement them into my existing site. Well, I’ll loook into these a little more and see what i can use


February 5th, 2010

great article, thanks


February 15th, 2010

I tried to use mootools at one point, but the lack of good documentation, I quickly organized outside … I found jQuery and sold me … When it comes to working with a new framework, in my busy schedule, do not have the time to go to find out what the code is doing … I need a good documentation that accompanies it. Never, however, these effects are very good.

Ajax or not

February 24th, 2010

so is this Ajax?
not Ajax?
Ajax or?
not Ajax?
AJax or
get a life…
get a real girlfriend
stop abusing ur hand..

Club Penguin

March 6th, 2010

This could really make my site fancy. I’ll experiment with it but I don’t want it to end up looking childish.


March 21st, 2010

Programs for internet browsing, security of your computer, multimedia works. Our web-site offers you legal and free programs like Mozilla or Open Office. You can download and install a lot of free software on our web-site nlnsoftware.com. We are waiting for comments.

Club Penguin

May 11th, 2010

I like imageflow the best. Nicey, nice.

web designer

May 18th, 2010

These are great. Will use them! Thanks so much for sharing.


June 15th, 2010

If you are looking for javascript effects to enchance your website maybe you gonna like my jQuery plugin


don tata

June 22nd, 2010

Nice forms, i can definitely make use for some of them in my projects.

Justin TImberlake

June 22nd, 2010

AJAX is only mediocre anyway.

chuck askicker

June 23rd, 2010

looks like the douchebag patrol is out in force, why are all these j.s.savants scouring the intertubes looking for website fanciness to copy? write your own fucking code. better yet, nut up and put your demos out here so we can post stupid bitter flames like this one. seriously, haters – go fuck yourselves.

vivek sharma

April 12th, 2011

thanks for these scripts its really good for us thanks again

Luis Felipe

April 18th, 2011

To all the people bashing this dude for his use of Ajax terminology, please take a nice big sip of shut the fuck up. Ajax (Asynchronous Javascript And XML) is an extremely loose term.

For example, I’ve been writing “Ajax” applications for a while now and I’ve never touched XML to do it, my transport mechanism of choice is JSON. Does this mean I’m not using Ajax? Should I tell my clients/bosses that I’m using AJAJ?

No, the terminology is loose enough to apply in this case. If you want to show off that you know what AJAX literally stands for good for you, /golfclap and all that. It only makes you look like you have the social skills of a 5 year old on a power trip cause you read a tutorial or two on the subject and want to impose your tiny e-peen on the rest of us.

GJ on these simple js effects. They are exactly that, simple, useful, quick, and as far as the user is concerned effective. That was the point of the article no?


April 27th, 2011

Thanks for present!


May 27th, 2011

Awesome list, thankyou so much!


June 22nd, 2011

Outstanding coding you presented in ajax. Thanks!


July 21st, 2011

Sory, but I can’t see example images… What does this mean? I tried all browsers, do I have to enable something?


July 27th, 2011

File format not found of open files

Leave a Comment

Subscribe to the comments on this article.