jQuery has made UX design on the web faster, easier and more accessible, but you don’t have to reinvent the wheel. We reveal the best jQuery plugins to save you time and effort
Appropriateness aside, jQuery is a fantastic library for designing and developing user interactions quickly. Whether it’s an image gallery or form, content-revealing animation or an explosion effect, the library provides the core building-blocks to allow you to rapidly prototype and deliver a unique user interface with the minimum of code and effort.
Don’t reinvent the wheel!
This presents an interesting question, however. Just because you can roll your own solution to any given problem, does that mean you should? Of course not! There’s absolutely no need to reinvent the wheel every time you want to create a bit of common functionality; use plugins to instantly add a behaviour. Doing so will save you even more time and effort!
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!
- The best WordPress plugins
- The best After Effects plugins
- The best Photoshop plugins
- The best InDesign plugins
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Words: Sam Hampton-Smith
Have you seen any amazing jQuery plugins that we’ve missed? Let us know about them in the comments below!