Top 20 jQuery plugins – August 2013

When John Resig developed the jQuery library back in 2006, he can’t have imagined that it would become the most popular Javascript library on the web, or that it would have tens of thousands of plugins written for it. But it’s true to say that jQuery, above all other libraries out there, has been embraced by the web design community. It’s so popular and pervasive that some developers feel JavaScript itself is threatened, such is the tendency to use jQuery when plain JavaScript would work.

Below we’ve rounded up 20 of our favourite jQuery plugins. Have a look, and let us know in the comments if we’ve missed your favourite!

01. MixItUp


MixItUp is a CSS3 and jQuery filter and sort plugin. Essentially, it enables you to quickly sort and filter through categorised content with beautifully fluid animation. Ideal for blogs, portfolios or even eCommerce stores, it’s also free for commercial use.

02. Menu-Aim


This simple-but-clever plugin can differentiate between a user trying hover over a dropdown item vs trying to navigate into a submenu’s contents. It automatically calculates the intention of your users as they interact with your menu system, preventing menus from being twitchy as the cursor moves into a sub-menu.

03. Tooltipster


Tooltipster is a modern take on the classic tool-tip, allowing you to present fully HTML-enabled tooltips in semantic markup with CSS used to control the display. There are a wide range of configuration options, making it customisable for any scenario.

04. Magnific Popup


This is a lightbox plugin for jQuery that focuses on being as lightweight and compatible as possible. The developer has concentrated on performance and user experience, so it doesn’t have all the features of alternative lightbox plugins, but it is super-fast and works perfectly across a huge range of devices, including High-DPI (Retina) devices such as the MacBook Pro.

05. Unslider


This simple little plugin is an image slider without the bells and whistles. It only slides, but as a consequence it’s tiny in size and super-responsive. Slides can contain HTML, be configured with CSS and there’s built-in keyboard-control support too.

06. Avgrund Modal


This beautiful modal-window popup adds a bit of wow to your pop-up content by blurring the page content and pushing it back in Z space, before bringing up the modal dialog. A great, lightweight solution to making your alerts really pop.

07. jQuery Knob


jQuery Knob takes input elements and converts them into touch-friendly dials that also work on the desktop. This is an excellent example of how you can tailor your content to suit new paradigms, and is worth a look for the technical approach if nothing else.

08. Typeahead.js


The product of Twitter’s development team, Type Ahead is an easy-to-implement tool that pulls from a local or external data source as your user types in to an input box, providing auto-complete suggestions as they go.

09. Windows


This handy plugin makes it easy to create full-screen scrolling websites with sections that fill the screen. Callbacks as the user moves between sections make it simple to react to events and nice features such as auto-snapping make it designer-friendly.

10. Cool Kitten


Cool Kitten is a responsive framework for parallax scrolling websites. The plugin fully supports smartphones and tablets as well as desktop browsers, producing smooth parallax movement in response to scrolling. It also includes a fluid grid, making it a great place to get started with responsive web design.

11. Scroll Path


Scroll Path is a lightweight plugin that allows you to define custom scroll paths for your content. Canvas is used to generate paths, and in compliant browsers it also allows you to rotate content in-situ for pleasing user interactions.

12. Arc Text


ArcText is a plugin from Codrops that makes it easy to bend text into an arc shape. The plugin has a built-in animation method which allows you to push and pull text into arcs over time.

13. Lettering.js


Lettering.js provides granular control over individual characters in your type, allowing you to apply kerning, colour individual letters, and apply event-listeners. It also plays nicely with FitText, giving you desktop-style control over your typography while remaining responsive.

14. Tubular


Tubular allows you to set a YouTube video as your page background. The set-up is simple, and it ‘just works’, providing immediate visual interest to your layouts.

15. tiltShift


tiltShift uses CSS3 filters to apply a tilt-shift effect to images. As such, it’s limited to working in Safari and Chrome currently, although with the release of the next generation of browsers this support should grow.

16. Hook


Hook adds the pull-to-refresh functionality you’ll find in many mobile apps, allowing you to load additional content or refresh the current view. It works intuitively as you’d expect, and provides the structure you need to capture the pull event easily.

17. Gridster


Gridster allows you to build multi-column, drag-and-drop layouts that make it easy to push and pull content around on the page, intuitively shifting other content out the way as you drop a column in position.

18. FitText


This handy plugin allows you to fill your container’s width with your type but automatically scaling the text size up or down to suit. Designed to facilitate responsive headlines, the plugin also integrates with Lettering.js to allow for granular per-character styling.

19. turn.js


One for lovers of skeuomorphism, this plugin replicates the old pages-of-a-book approach to showing content in the browser, previously the preserve of Flash, entirely with HTML5 and CSS.

20. ClassySocial


ClassySocial is a new take on the popular social-share button paradigm. Rather than simply show a list of buttons, ClassySocial animates them into position when a share button is clicked.

Blog Post by Farai

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s