20 brilliant jQuery plugins

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 is a fantastic library for designing and developing user interactions quickly. Whether it's an image gallery or form, content-revealing CSS animation or an explosion effect, the library provides the core building-blocks to allow you rapid prototyping and to deliver a unique user interface with minimum code and effort.

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! Here's our list of useful jQuery plugins.

01. Muuri

jQuery plugins: Muuri

Muuri's flexible layouts are responsive, sortable, filterable and draggable

For the ultimate in flexible layouts, Niklas Rämö's Muuri is well worth a look. Its layout system enables you to position grid items of assorted sizes within a container in pretty much any way imaginable, and it's responsive, sortable, filterable and draggable. By default it'll arrange everything in a 'fit first' manner, but you can add your own layout algorithm for a different layout style.

02. AnchorScroll.js

jQuery plugins: AnchorScroll.js

Give your site a bit of motion blur with AnchorScroll.js

There's nothing like a bit of ultra-smooth scrolling to help your site stand out from the crowd, and AnchorScroll is a lightweight and easy-to-use jQuery plugin for doing just that. It gives you smooth scrolling to anchor targets, with added classes and callbacks to elements on scroll events, and on top of that there's the option to add a blur effect to the body while scrolling, as well as a bounce effect that'll take you back to where you came from after scrolling to an anchor element.

03. Timeline.js

timeline.js

Timeline does exactly what it says on the tin, and creates a timeline slider

This jQuery plugin offers a twist on the carousel component: Timeline.js provides you with everything you need to create a carousel timeline (i.e. a slider that progresses based on chronological points). It includes plenty of visual and functional customisation options.

04. Tilted page scroll

tilted page scroll

Tilted page scroll adds a neat 3D effect to your pages

This plugin from Pete R. is an excellent way to grab people's attention and add a little extra depth to your site. With it installed, items will tilt into view as they scroll up the page, and tilt again as they scroll out of the top of the page. It's a great-looking effect that's nice and easy to implement.

05. Focuspoint

focuspoint jquery plugin

Say goodbye to badly-cropped responsive images

The great thing about responsive web design is being able to create a single page that'll look good on any device. However if your site's automatically cropping images to fit certain viewports, it can often lose the focal point. With Focuspoint, you can make sure your image looks great in any container by specifying a focal point for each image, and the plugin will crop out unwanted parts before the important bits.

06. SVGMagic

SVGMagic jquery plugin

SVGMagic creates PNGs to replace SVGs where they are not supported

Using SVG images is a good idea because they will look sharp at any size, and this plugin helps you to do that without having to worry about browsers that don't support them. It searches for SVG images and replaces them with PNG versions if SVG isn't supported. 

07. Face Detection

Face Detection jQuery plugin

This plugin provides an easy way to use some powerful technology

Detect and get the coordinates of human faces in images, videos and canvases with this plugin, which was written by Jay Salvat and uses Liu Liu's face detection algorithm. 

08. Round Slider

rounderslider jQuery plugin

The slider can be themed to suit your purposes

This circular slider enables the user to select a range of values by mousing over the circle. The full slider is the default setup, but you can also use it to get quarter-circle, half-circle and pie shapes. There are CSS styles you can adjust to theme it in various ways, for example, to look like a speedometer. No images are involved; it's all made with CSS and JavaScript. 

09. jInvertScroll

jinvertscroll jQuery plugin

Get a parallax effect with ease

jInvertscroll makes it easy to implement horizontal scrolling with a parallax effect. Roll your scroll wheel on their demo site to whizz along sideways while two layers of landscape move at different speeds to create an illusion of depth. 

10. Slinky

jQuery plugins: Slinky

A menu design that won't go out of style?

Slinky is an elegant, timeless menu design that's useful for any scenario in which you've got a lot of sub-menus. Select an item and an animation slides the sub-menu over. There's a demo here.

Next: more essential jQuery plugins