Advertisement
Web Roundups

The 20 Most Practical and Creative Uses of jQuery

by

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

    Screenshot 1

    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.

    Visit Site

  • Dragon Interactives jQuery Navigation

    Screenshot 1

    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?

    Visit Site

  • FamSpams FaceBox

    Screenshot 2

    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.

    Visit Site

  • Grooveshark Widget Creator

    Screenshot 3

    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.

    Visit Site

  • CSS-Tricks Fade-In Navigation

    Screenshot 4

    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.

    Visit Site

  • David Walsh Link Nudge

    Screenshot 5

    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.

    Visit Site

  • CarrotCreative-Custom Sites Lightbox

    Screenshot 6

    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!

    Visit Site

  • BrightCreative Portfolio

    Screenshot 7

    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.

    Visit Site

  • Incredible Login Form

    Screenshot 1

    Not too long ago, Connor Zwick wrote us a nice tutorial that demonstrates exactly how to build an amazing drop-down login form.

    Visit Site

  • Application Scroller by Aviary

    Screenshot 8

    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.

    Visit Site

  • Featured Fade Effect by DesignFlavr

    Screenshot 9

    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.

    Visit Site

  • Hv-Designs Fade In RSS Icon

    Screenshot 11

    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.

    Visit Site

  • Asylums Custom Scroller

    Screenshot 12

    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.

    Visit Site

  • 5 Javascript Tricks Made Easy with jQuery

    Screenshot 14

    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.

    Visit Site

  • Codas Entire Website

    Screenshot 15

    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.

    Visit Site

  • Clark Lab Fading Effect

    Screenshot 16

    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.

    Visit Site

  • Rob Young | E is for Effort

    Screenshot 17

    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.

    Visit Site

  • Web Designer Wall

    Screenshot 18

    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.

    Visit Site

  • Junaid W. Hanif

    Screenshot 19

    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.

    Visit Site

  • KomodoMedia

    Screenshot 19

    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!

    Visit Site

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
  • Code
    Articles
    Introduction to WordPress App ThemesApp theme 400
    With the increasing growth rate of WordPress powered websites, the need for WordPress themes is rising. Multi-purpose themes are becoming highly popular among website owners. Many existing themes are built mainly to address blog functionality. But with the growth of WordPress web application development, we are in need of specialized themes for different purposes. These themes are known as app themes. In this article, we going to familiarize with the concept of app themes and their usage in real world.Read More…
  • Code
    Articles
    Strategies For Choosing the Right Premium WordPress Theme for Your Next ProjectPremiumwp
    You have your credit card in hand, and you are ready to buy a beautiful, premium WordPress theme for your next website or blog. But where should you begin? Perhaps a search through Google? Maybe a famous WordPress theme site? Perhaps ThemeForest.net? In this post, I aim to arm you with a few tips that will guide you when choosing a premium theme not only purchase a beautiful theme, but one that will meet your needs.Read More…
  • Code
    Tips
    Quick Tip: Using Dashicons for Menu ItemsDashicons featured image 400
    Last year, WordPress moved to using plugins for working on new features for core. One of the first ones to appear was the MP6 plugin. It was a complete redesign of the WordPress admin. One of the changes was moving from using images to an icon font, Dashicons. In WordPress 3.8, we saw this new design make its way into core. All of the icons in the WordPress admin are now using Dashicons and we too can use them in our themes and plugins.Read More…
  • Web Design
    eCommerce
    E-commerce for Mobile: Making the Most of Your SiteMobile thumb
    In this article we’re going to address some mobile e-commerce hurdles. I'll break down a few of the most important steps to take account of in preparing an e-commerce site for mobile access and offer you some advice based on my experience.Read More…
  • Code
    Tips
    The Beginner's Guide to Setting Static Front Pages in WordPressStaticfrontpage
    Typically, in a WordPress website, the home page shows the blogger's latest posts, but what if you wanted the homepage of your website to display the same page every time? For those of you who are just getting started with WordPress, then it's worth noting this is not only possible, but it's really easy.In this article, we'll talk about how to implement a static front page in WordPress as well as where it would and wouldn't be appropriate.Read More…
  • Code
    Plugins
    The Beginner’s Guide to WordPress SEO by Yoast: Final TweakingThe beginners guide to wordpress seo by yoast
    In my previous article, I discussed the social settings of Yoast's WordPress SEO plugin. In this tutorial, you will learn the final steps to configuring the WordPress SEO plugin with the ultimate goal of making it as rock-solid as possible for your blog.Read More…