Feb 24 2012

All About jQuery: Fresh and Useful jQuery Plugins and Tutorials

Advertisement

Every designer knows that jQuery is not only a handy tool, but it is also very popular and widely implemented. Thus, they try to master their jQuery skills. If you fit into this category then this post of over 40 fresh and cool jQuery plugins and tutorials is for you. This showcase should allow you to grab some of the techniques required for developing a more interactive and visually appealing website with jQuery and harness the power of this tool.

When you come out the other side of this collection and have finished learning all that these plugins and tutorials throw at you, we hope that using jQuery will be a much simpler task. Which will hopefully translate into more satisfied clients and users. Enjoy!

jQuery Resources

Password Strength Verification with jQuery ( Demo | Tackle the Tutorial )
In this tutorial, we’ll construct a form that gives the user live feedback as to whether their password has sufficiently met the complexity requirements we will establish.

Screenshot

Create a Windows-like Interface with jQuery UI ( Demo | Visit the Source )
In this tutorial, you will learn how to utilize jQuery UI to create a highly-functional user interface without using anything else. By the end, you should be familiar with jQuery UI, some of its components, and basic understanding of jQuery UI’s customization.

Screenshot

Akordeon ( Demo | Visit the Source )
Akordeon is fully customizable and can be used to display large chunks of data (text, images etc.) in a limited space. For instance, you can use it to display categorized data or menu options just like a restaurant’s menu items with each category’s data displayed in a separate panel.

Screenshot

Fast and Simple Links Box Navigation Menu: BoxyMenu ( Demo | Visit the Source )
BoxyMenu is a simple and fast navigation menu plugin that renders smoothly in all major web browsers. It is simple to customize and can be plugged in to any website or web application.

Screenshot

Item Blur Effect with jQuery and CSS3 ( Demo | Visit the Source )
With this jQuery plugin you can create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up.

Screenshot

jQuery Clean and Simple Tooltips: Gips ( Demo | Visit the Source )
Gips is a clean and simple jQuery plugin. Fully customizable, and easy to use. It also supports CSS themes.

Screenshot

Fullscreen Image Blur Effect with Html5 ( Demo | Visit the Source )
With this jQuery plugin you can create a fullscreen image display with small thumbnail navigation and a blur transition effect for smooth image changes.

Screenshot

jQuery Plugin for On-demand Search Box: SeacrhMeme ( Demo | Visit the Source )
This jQuery Plugin is called SearchMeme – the idea is to provide a small search button that can be placed anywhere on the website. Clicking on search button expands it to show a text box where you can type your search terms.

Screenshot

Multi-Level Hierarchical jQuery Menu: jQSimpleMenu ( Demo | Visit the Source )
jQSimpleMenu is a multi-level hierarchical jQuery drop down menu that helps you add drop down menus in your website without writing a single line of code.

Screenshot

Making a jQuery Countdown Timer ( Demo | Visit the Source )
With this jQuery plugin you can display a countdown timer. It will show the remaining days, hours, minutes and seconds to your event, as well as an animated updates every second.

Screenshot

Awesome jQuery scrolling decks plugin ( Demo | Visit the Source )
A jQuery plugin for making scrolling presentation decks with complete ease.

Screenshot

jQuery List Items Menu Like iPhone Display ( Demo | Visit the Source )
A jQuery plugin that allows you to display list items in a similar way to an iPhone home screen. If the item count exceeds the number of displayed items on one screen, users can swipe through screens.

Screenshot

3D Gallery with CSS3 and jQuery ( Demo | Visit the Source )
With this jQuery plugin you can create an outstanding 3D Gallery with CSS3.

Screenshot

Shiny Knob Control with jQuery and CSS3 ( Demo | Visit the Source )
With this jQuery plugin you can create a shiny knobbed control, with CSS3 transformations and jQuery’s new event handling methods to give visitors of your website a new way of interactively choosing a value from a range.

Screenshot

Arctext.jp – Curving Text with CSS3 and jQuery ( Demo | Visit the Source )
While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let’s you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.

Screenshot

jQuery Plugin For Rotating Image ( Demo | Visit the Source )
With this jQuery plugin you can create an amazing rotating image with the simple click of the mouse.

Screenshot

Thumbnail Proximity Effect with jQuery and CSS ( Demo | Visit the Source )
With this jQuery plugin you can create a neat thumbnail proximity effect with jQuery. The idea is to scale thumbnails when hovering over them and also scale their neighbouring thumbnails proportionally to their distance.

Screenshot

Creating Your Own Ajax Poll System ( Demo | Visit the Source )
In this tutorial we will be creating our very own polling system (AJAX) for your projects with PHP.

Screenshot

Lateral On-Scroll Sliding with jQuery ( Demo | Visit the Source )
With this jQuery plugin you can create a “slide-in on scroll” effect. You’ve probably seen this cool effect on some websites, now you can have it on yours.

Screenshot

Elastic Image Slideshow with Thumbnail Preview ( Demo | Visit the Source )
With this jQuery plugin you can create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and users can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option.

Screenshot

More on Page Two

We are just about halfway through the post, but don’t move on just yet, there is still more jQuery goodies on page two.

About the Author

Nousheen Aquil is a web graphic designer. She loves photography, drawing and painting. She also is a contributing member of WebdesignCore , a platform that focuses on free web resources and inspiration for designers and developers.

Comments and Discussions
  • Evan Skuthorpe, 24 February 2012

    Great collection thanks.

  • Trudy Smith, 24 February 2012

    Awesome post…more like this please

  • littlespark VT, 25 February 2012

    Love this article.The Parallax scrolling plugin is pretty sweet. I’ve been looking around for something like this for a while. Thanks!

  • Nelson Sakwa, 25 February 2012

    massive thanks for this article. i am a massive fan of the works produced in codrops and tutorialzine

  • Oliver, 25 February 2012

    Really great Plugins. Thank you for this article.

  • Makarand, 28 February 2012

    Thank you, Again a very interesting and useful article. I am gonna use most of it

  • Nimsrules, 28 February 2012

    Received this post of yours in the newsletter just when I was losing a tad bit of interest from jQuery. Bookmarked :)

  • Heryien, 28 February 2012

    Bookmarked. :) Thanks.

  • Peter, 28 February 2012

    Good bookmarks!

  • Rana mukherjee, 29 February 2012

    Nice collection

  • Valeriy, 03 January 2013

    I want to thank the author for the really great post. This collection of jQuery plugins is awesome! I’m sure I will use a couple of plugins seen here very soon. Thanks one more time!

search form
 
image description image description