There have been plenty of posts on the number of awesome jQuery plugins and where to find them. However, sometimes it is best not to rely on third party plugins and resources. Do it yourself the old fashioned way! Today, we will have a look at 20+ creative uses of jQuery in modern day websites and applications; sure to inspire you for your next project.
James Padolsey Color Switcher
One of our sporadic writers, James Padolsey, has a nice feature on his website. A "customize" bar in the top right portion of the screen allows you to change the background color of the header.
Dragon Interactives jQuery Navigation
These guys are pretty much Gods of web design, and their site really proves it. Just have a look at the custom jQuery navigation they used on their homepage. Have you ever seen such a sexy navigation in your life?
FamSpams FaceBox
FamFamFam needed a custom lightbox like script for FamSpam (whew, say that three times). They ended up building what is now know as FaceBox, which replicates the effects of lightbox, but goes above and beyond by allowing you to load in static html pages, contact forms, anything you wish really! FaceBox is now a jQuery plugin after all the demand for their script.
Grooveshark Widget Creator
Instead of going with a typical flash menu/control menu, Grooveshark mixed it up a bit and built a custom jQuery script to allow you to make your own music widgets; pretty nifty indeed.
CSS-Tricks Fade-In Navigation
CSS-Tricks, by Chris Coyier, is next up on the list with a wonderfully simple and creative jQuery navigation. When the links are hovered over, instead of immediately changing colors, jQuery is used to help the color fade slowly to the desired color.
David Walsh Link Nudge
Developer David Walsh of DavidWalsh.name implements an extremely simple to use script to give your links a little nudge on hover. The script utilizes the strong animation capabilities of jQuery triggered on hover. Check out the links in the sidebar and in the footer to see the effect in action.
CarrotCreative-Custom Sites Lightbox
If you check out the CarrotCreative website, you will actually notice two really unique jQuery effects. Firstly, if you click on sites in the upper left, you will see a unique application of a 'lightbox' like effect listing their sites and icons. Secondly, if you click on any navigation links, you will notice there is no refresh, but that the new page just slides in from the right. Cool stuff!
BrightCreative Portfolio
Another "two for one" special, Bright Creative uses an extremely subtle glow effect in their navigation that is very calming and warm. In addition, all of their portfolio pages have a tabbing effect, so their is no need for the user to refresh the page every time - thanks to AJAX and jQuery.
Incredible Login Form
Not too long ago, Connor Zwick wrote us a nice tutorial that demonstrates exactly how to build an amazing drop-down login form.
Application Scroller by Aviary
It would be an insult to call this a type of 'marquee' (shivers uttering that word). Instead, Aviary came up with a very nice looking and functioning 'scroller' to showcase a lot of text in a small amount of space. Even better is that the scroller will degrade gracefully is javascript is disabled.
Featured Fade Effect by DesignFlavr
DesignFlavr, known for their great sources of design inspiration, put together a simple fadeIn/fadeOut script to showcase their featured artwork and corresponding descriptions. Also, they've used the lavalamp plugin quite well on their main navigation.
Hv-Designs Fade In RSS Icon
On the Hv-Designs homepage, you will notice the the RSS icon starts off as an outline/sketch of the actual image. Then, when hovered, the rss icons 'glows' into place.
Asylums Custom Scroller
Besides being an absolutely hilarious website, Asylum has their own sweet 'featured articles' scrolling script. It's hard to put a finger on why this one is so nice, but that is probably because it behaves slightly differently than most scrolling scripts. It almost seems to snap into place after you give it a click.
5 Javascript Tricks Made Easy with jQuery
Brian Reindel created a webpage showcasing 5 custom scripts you can use however you like. The article takes ideas and previous javascript techniques frequently used and utilizes jQuery to make them powerful, compact, and easy to read.
Codas Entire Website
Coda is well known for its amazing UI and site design. It set a fire under the jQuery plugin community by inspiring many developers to re create their page tabbing effect. In addition, they have a wonderful on hover effect on the links located in the header.
Clark Lab Fading Effect
ClarkLab is a well known and very successful author on ThemeForest. If you visit his portfolio below, you will notice the large header images eventually fade to the next, showcasing all of his latest work. The fade effect is so well done and subtle, you barely notice the new image showing up.
Rob Young | E is for Effort
Designer and Art Director Rob Young used a unique idea of displaying his artwork on a simulated Mac screen. Then using jQuery scrolling effects, each new page slides into the page view as if it is being loaded on a computer.
Web Designer Wall
Besides being a visually stunning website, WDW features some unique custom jQuery scripting to add classes to certain elements on hover. Check out the effects when the rss and navigation items are hovered over.
Junaid W. Hanif
Another really cool tabbing effect - instead of arrows however, pagination and AJAX is used to create a sleek and clean user experience. Plus, the navigation has a very nice albeit simple effect.
KomodoMedia
I've saved my absolute favorite site for last. First, just look at that design, it's wonderfully unique and comforting. Using one of the most creative jQuery scripts I have ever seen, KM has a 'foliage-o-meter' slider where sliding it either increases or decreases the foliage and design of the theme, depending on the direction the slider is moved. For an easter egg be sure to check out the source code!
Keep in mind that jQuery is simply a tool and is only limited by your creativity and skill level. Get unique with your designs and development process and you might be surprised to see great results occur. Please be sure to share any of your favorite websites featuring unique uses of jQuery in the comments section below! ...And a Digg or Stumble would be greatly appreciated! :)
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )grrrrr8 January 12th
Wow awesome stuff.
( )Trond January 12th
Thanks for the inspiration !
( )Shane January 12th
It’s a nice list. Of the effects, most are quite nice or subtle.
I fear that the simplicity of jQuery will usher in a new era of over-the-top eye-straining pages. Simplicity is the key – don’t do it just because you can do it.
( )Etheco January 12th
Loved reading but, James Padolsey Color Switcher site link doesn’t work.
( )Upendra July 13th
I really love this
( )insic January 12th
jQuery is really indeed a powerful js framework. Love the list.
( )crypta January 12th
This is what I need! thx
( )Jhay January 12th
Oh! Great! I’m loving it now.. thanks!
( )Joefrey Mahusay January 12th
Great List Thanks a lot!
( )Ben Reid January 12th
I also love the last one. Though not so practical!
( )Jim Neath January 12th
The scroller on the Asylum site isn’t in jQuery.
It was originally built in Prototype/Scriptaculous and then rebuilt in MooTools.
( )Omair Rais January 12th
Cool Websites.
Thanks
( )Omair Rais
http://www.omairarts.com
Jason January 12th
Some pretty good stuff in that post. Thanks.
( )Zen Elements January 12th
A very nice collection & I’m glad to see the usability isn’t jeopordized at all really. One of my main concerns with jQuery and rising technolgies.
Thanks for sharing the list! Inspiring.
( )Player January 12th
Ae! Awsome! =D
( )BTW i like the KomodoMedia’s easter egg!
Kevin Quillen January 12th
“These guys are pretty much Gods of web design, and their site really proves it”
Wha? The site is half finished and their portfolio is not that impressive.
( )Timothy January 12th
Would love to see a similar list for those of us who use MooTools or Prototype. Nice list though!
( )Harry M January 12th
I’m not sure that Panic used jQuery for the Coda site – seems to be their own Javascript…
( )Lamin January 12th
Great list. But it’s worth nothing that not all of those effects make use of jquery.
Thanx for the post.
( )Jeremy Peck January 12th
Very interesting collection of sites!
I will point out however (to prevent any confusion perhaps) that David Walsh is actually a Mootools-a-holic, and the navigation effects (and really anything you’ll find on his site) are a product of Mootools.
Definitely a good site to check out for helpful tips and tutorials as well if you’re into Mootools.
( )Amir January 12th
The fist site is a dead link. The second site doesn’t use jQuery.
( )Tom Lewis January 12th
Wow, ausom collection of Jquery plugins, i moved from mootools, as Jquery has such an amazing user base, for thigns like this!
i cant code Javascript, so i rely on these user scripts, there great! =]
( )Brenelz January 12th
Great websites. JQuery can be used in many great ways. Really loving the library!
( )hvdesigns January 12th
thx for featuring hv-designs
much appreciated
( )Jim Neath January 12th
You need to change the title of this post to 16 Most Practical and Creative Uses of jQuery.
Three of the site’s listed use MooTools, not jQuery. The Coda site use’s custom stuff as far as I can see, so no jQuery there.
( )Kevin Quillen January 12th
There is a jQuery version of the coda slider.
http://www.ndoherty.com/demos/coda-slider/1.1.1/
( )Pieter v January 12th
some of these don’t use jquery and the ones that do almost all have the same old fade or tab effect, how is this so “awesome”?!!!!
( )Wassim January 12th
@ Shane
Totally agree with you. Some “Eye-catching” web designers are just doing FASHION WORKS with their fill-in-the-blank of choice and loosing by that the main purpose of their creation: STRAIGHT COMMUNICATION/INFORMATION. I can make an analogy with the fact most of us like to wear simple/useful clothes like blue jeans instead of a state of the art creations “de chez Lagardère”.
PS:
Exceptions: portfolio based web sites. The web designer in this case have to communicate its POTENTIAL.
Nice selection though
( )Wassim January 12th
OK. I think that my comment was filtered. Anyway; the idea is clear
( )Gopal Raju January 12th
Interesting…
Gopal
( )http://www.productivedreams.com
http://twitter.com/gopalraju
Alexandre Plennevaux January 12th
Wouiiiiiiiin, you forgot to mention Lisa Pram’s interactive barcode image gallery !! http://www.lisapram.com
Ps: this comment box has 3 input texts without labels. Wonder which one is which…
( )acidcloud January 12th
These are amazing. One thing though, is it just me, or is the “Application Scroller by Aviary” not showing up like in the screen shot?
( )clarklab January 12th
heyyyy, I made the list. glad you enjoyed it…
( )Felix January 12th
I also want to point out that the main navigation from WebDesignerWall.com is “animated” with CSS, not javascript – there is also a tutorial about that technic on the site
( )Geeee January 12th
ohhh great selections here .. thanks for sharing this, I need to revise them again ;D
( )max January 12th
great collection – we’ll be using a few of these for the launch of myows, so stay tuned !
( )Nate January 12th
Great collection!
( )Brian Reindel January 12th
Hi Drew,
Thanks for featuring 5 Javascript Tricks Made Easy with jQuery. Although not as flashy as some of the other sites, I hope it demonstrates some real-world possibilities with jQuery. As a side note, the page is due for an update. jQuery no longer supports XPath as a part of the core, and several of the examples could be updated to take advantage of recent enhancements in new versions of the library. Nettuts readers may also find the following post helpful:
40+ JavaScript and jQuery resources that will make you a better Web developer
( )Marcus January 12th
rather strange post. some of these effects arent jquery but mootools or custom javascript or pure css. one of the sites is a template that is sold on themeforest, to my mind you should give the author credit and not someone who bought the template
( )Kevin Quillen January 12th
Is anyone really reading these or looking at the sites or just totally assuming its jquery everywhere?
( )Tamreen Khan January 12th
@Kevin, a bunch of the comments have pretty clearly been posted just to get the link to the poster’s site and any resulting traffic. I fail to see why else so many would bother to post just to say “Awesome, thanks!”
As for the post itself, a few are truly innovative and interesting. However, many links are just eye-candy. Using jQuery to prettify the navigation? Adding some hover effects? Calling these practical *and* creative is stretching it alot. Calling them the *most* practical and creative uses of jQuery…really?
( )Ahad January 13th
Strangely enough they aren’t all jquery….Cool sites though, an inspiration to all of us => Thanks Drew!!
( )Shuuun January 13th
Oh well, we all love Javascript and popping elements =)
( )ryan j January 13th
whole lotta fading in that article.
apart from that some nice, UI focused links.
( )Concerned Citizen January 13th
All this gee-whiz, self-promoting, “look at what I can do” coolness is fine, but how about accessibility issues? Do the disabled have access to these websites?
( )Mike January 13th
Dragon Interactive’s site (the “Gods of web design”) doesn’t use jQuery…
( )Kevin Quillen January 13th
Any editor vetting goin on?
( )Brian Reindel January 13th
@Mike
http://dragoninteractive.com/lib/j/cappuccino.js
That is jQuery.
@Concerned Citizen
Did you check if the disabled have access to those Web sites? Accessibility is a lot more than turning JavaScript on/off, and can be an intensive discovery during the planning and development process. Just because someone shows how to use a technique with JavaScript, doesn’t mean someone else can’t build an accessible Web site around that technique.
( )Andy M. January 14th
I’ve looked through this article (and many others) and have been inspired by the different UI uses for jQuery (and javascript in general). However, for a site I am currently developing, I have a need for a carousel-type block on the home page that fades between 3 different images automatically, giving the user the chance to click on one and go to another page on the site. I have seen this done in many ways with flash, but the only javascript approach I have seen that meets my needs is the one used by Apple on the new iLife page (http://www.apple.com/ilife/). Does anyone have any ideas what they are using or if there is a project that is similar to their implementation?
( )Kirk Bushell January 14th
Unfortunately I don’t see any of these as practical at all. Creative, yes. Practical? No. I’m one who’s focus is more on site functionality rather than little gimmicks, especially when it comes to javascript. The amount of javascript loaded into pages these days, thanks to bloated libraries (which imo, aren’t necessary most of the time) means people are waiting longer for their content when as web developers, we should be going the other way. Javascript is fantastic for what it does best, and that is making the life EASIER for users of your site, not loading your page with unnecessary visual cues. Some of the examples given also slowed down my browser quite substantially, which I don’t think is too impressive.
( )Wazdesign January 16th
Really Good Site list I love it this Design
( )zplits January 17th
Thanks for sharing. Nice list and wonderful sites.
@joefrey mahusay and insic, hello there, I’m also a freelance web designer and a full blooded pinoy. I’m new in wordpress, and i am amazed of how easy it is to create powerful website with this free software, but i still don’t know yet how to create a theme from scratch. I hope you could share me some info’s and resources on how to create your own theme in wordpress.
glad to see you here fellow filipinos.
( )MIke January 19th
WOW. Thanks, you are change my perspective for the web.
I am web developer, but i am new in Jquery dimension.
Thanks again, for u Ilumination.
I am Panamenian.
( )sivas January 20th
ooo. superrr. Thanks..
( )brian dichiara January 23rd
I know this partially uses an animated gif but this is where I tried to effectively use jQuery.
http://www.solepixel.com/spinmove/
BTW, my favorite is KomodoMedia’s Foliage-o-Meter. Although useless, it probably provides KomodoMedia with at least 50% of their traffic.
( )zac February 5th
I think some are very practical as they allow a lot to be contained in a small area of screen making it much easier to surf a lot of info without changing pages or scrolling around.
When I disabled JS on the Aviary site it didnt work for me at all.. it was just stuck on the first tab.
( )Andrew Wise February 13th
Thanks for including Grooveshark in the list, we’re extremely happy with our lead designer
( )Roon February 25th
Sweet, some great examples of jQuery. I really need to learn about the framework more, but I get so little opportunity to build interfaces these days. Stuck in the back end PHP!
( )nasrat ali May 24th
not so useful
( )Rebecca July 31st
I’m lovin’ the KomodoMedia site…..
( )wrought iron furniture August 12th
Thanks a lot, I really like what this can do!
( )sivas August 15th
very good, thank you
( )Serg November 26th
We decided to show JQuery examples animating site elements:
( )http://justcoded.com/article/jquery-examples/
webb December 24th
I am definately bookmarking this page.
( )