10 JavaScript Effects to Boost Your Website’s Fanciness Factor

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, 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.

This was published on Mar 18, 2008


J. Arthur Mar 19 2008

Instant.JS sounds really useful. Thanks!

fak3r Mar 19 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!)

Anonymous Mar 19 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.

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.

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

Jacob Gube Mar 19 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.


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

Banana Mar 19 2008

thx for this article.

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

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

Johnnie Walker Mar 19 2008

Why didn’t you mentioned Dojo?

Kevin Quillen Mar 19 2008

dojo is ‘meh’

Kevin Quillen Mar 19 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 Mar 19 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.


Martin Mar 19 2008

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

Tyler Mar 19 2008

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

Mike Rundle Mar 19 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 Mar 19 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

Have you checked out ProtoFlow (

it even has auto reflection and stuff!

Michael Müller Mar 19 2008

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


who cares Mar 19 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.


Jason Mar 19 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 Mar 19 2008

Alongside shadowbox.js, highslide.js ( 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 Mar 19 2008

Thank you alot for these effects. Very useful indeed.

charlie Mar 19 2008

thanks for this the slide thing is useful to me

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

Candis Mar 19 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.

Etienne Mar 19 2008

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

chvnx Mar 19 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!

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.

If it hasn’t been mentioned already, also check out MoodalBox ( as an alternative for lightbox. It does actual AJAX retrievals and posts, and supports all of the pretty MooTools-driven effects also.

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…

Jackola Mar 19 2008

Or, you could replace half of these with LightWindow:

It’s built on Prototype and Scriptaculous.

James Mar 19 2008

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

David Thomas Mar 19 2008

You forgot jQuery

Jacob Gube Mar 19 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).


Michi Mar 19 2008

I love GreyBox.


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.

jQuery is all you need. For everything. Forever.

Iconic Mar 19 2008

Grea tips!!!

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

Jerry Kew Mar 20 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 Mar 20 2008

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

Enjoyed this post.


GLICH Mar 22 2008

I love mooTable! Very useful!

Imageflow is brilliant!

Amberjack is handy for applicationy sites and fast to implement.

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

kcherng Mar 25 2008

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

horiyochi Mar 25 2008

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

jagthedrummer Mar 28 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.


deltawing Apr 01 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 Apr 01 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.

Acronyms Apr 10 2008

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

Great list of JavaScript UI effects!

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!

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!

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.

Christina Apr 24 2008

thanks for the tips. they are quite the timesaver.

Werbegaentur Ansbach Apr 26 2008

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

shyboy May 22 2008

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


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. Sep 05 2008

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

Nurrad Oct 10 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.

Nice tips with some great effects!

Gazikent Nov 11 2008

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

Anonymous Coward Nov 14 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.

2009 Yerel Seçimleri Nov 18 2008

Grea tips…

Skibbe Nov 24 2008

thanks for the tips.

thx for this article.

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

Website Development Jan 23 2009

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

Walter Jan 25 2009

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

David Jan 27 2009

Pretty really cool! thanks for this post!

Web Design Liverpool Jan 28 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.

Cristian Feb 04 2009

Lot’s of great effects but where is Ajax ?


Computer Geek Mar 30 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.

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

artzy65 Apr 15 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?

artzy65 Apr 15 2009

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

club penguin May 19 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?

Heres a nice Slimbox AJAX script, its AWESOME!

Pintu Jul 14 2009

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

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

Aaron Reynolds Jul 28 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 Jul 28 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.

Marina Sep 19 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.

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.

Ammar Sep 28 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.

Bangas Sep 30 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?

@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

ninjapug Dec 07 2009

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

Doug Barned Dec 08 2009

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

sno man Jan 08 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 Jan 28 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

ikoyski Feb 05 2010

great article, thanks

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 Feb 24 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 Mar 06 2010

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

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 We are waiting for comments.

Club Penguin May 11 2010

I like imageflow the best. Nicey, nice.

web designer May 18 2010

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

rezoner Jun 15 2010

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

don tata Jun 22 2010

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

Justin TImberlake Jun 22 2010

AJAX is only mediocre anyway.

chuck askicker Jun 23 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 Apr 12 2011

thanks for these scripts its really good for us thanks again

Luis Felipe Apr 18 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?

Julian Apr 27 2011

Thanks for present!

Awesome list, thankyou so much!

ClickTech Jun 22 2011

Outstanding coding you presented in ajax. Thanks!

Elena Jul 21 2011

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

Naser Jul 27 2011

File format not found of open files

This comment section is closed. Please contact us if you have important new information about this post.