The 20 Most Practical and Creative Uses of jQuery
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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Drew Douglass
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
RoyalSlider – Touch-Enable ... only $12.00 
Kult House - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
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.
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.
ooo. superrr. Thanks..
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. :)
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.
Thanks for including Grooveshark in the list, we’re extremely happy with our lead designer :)
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!
not so useful
I’m lovin’ the KomodoMedia site…..
Thanks a lot, I really like what this can do!
very good, thank you
We decided to show JQuery examples animating site elements:
http://justcoded.com/article/jquery-examples/
I am definately bookmarking this page.
Check out Infinium Walls, http://www.infiniumwalls.com for a really cool example of using jquery for a sliding effect on a site.
Nice Designs..Good Stuff..
thanks , you very beautiful
thanks you very pro
Great collection, I love the one in dragoninteractive.com, here is another example using beautiful jQuery in web design http://ashaker.com using Carousel slider and CSS-Dock :)
Great, this is a really amazing jquery list !, i found more examples on http://www.ajaxshake.com
There is certainly a whole lot to know about this.
I believe you made some great points in features also.
very good, thank you
Wow! Great list… just found this and it is with the best in jQuery.
Good list. Thanks
It’s uncommon for us to notice something in the web that is as entertaining and fascinating as what you’ve got in this article. Your web site is appealing, your images are great, and what’s much more, you make use of reference which tend to be relevant to what you’re saying! You’re absolutely a person in a thousand, best job!
There are nice jquery effects in your article, nice job!
Here is also a website that is using jquery masonry and a custom jquery script letting users creating their own look.
http://www.gdotmoda.com/en/online-boutique
Undeniably believe that which you stated. Your favorite justification appeared to be on the internet the simplest factor to be mindful of. I say to you, I definitely get irked at the same time as other people think about concerns that they plainly do not recognize about. You managed to hit the nail upon the top and outlined out the entire thing without having side-effects , other people could take a signal. Will likely be again to get more. Thank you