Top 10 Brilliant jQuery plugins

Created in 2006 by John Resig, the jQuery library is now the most popular JavaScript library on the web. There have been tens of thousands of jQuery plugins written for the jQuery library.

Whether it's an image gallery or form, content-revealing CSS animation or an explosion effect. It's a fantastic resource for designing and developing user interactions quickly. For more useful web design resources, explore our list of the best JavaScript APIs and our pick of the best JavaScript frameworks to consider.

The library provides the core building blocks to allow you rapid prototyping and to deliver a unique user interface with minimum code and effort.

1. RTO+P Video Player

It makes it easy to build and customize your own video player that gets its video either from your own server or CDN or from a public Vimeo stream. Use the HTML5 video tag to make life easy, or for better performance you can use the lazy load option. Sure, it's easy to embed video from YouTube or wherever, but if you want a little more control over your video then RTO+P Video Player is a must.

2. Slick

With all sorts of options to play with including lazy loading, autoplay, callbacks and more. Is this the last carousel you'll ever need? It certainly could be; Slick's a jQuery plugin that gives you fully responsive carousels of just about every kind you could wish for.

3. Muuri

By default, it'll arrange everything in a 'fit first' manner, but you can add your own layout algorithm for a different layout style. 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.

4. AnchorScroll.js

It gives you smooth scrolling to anchor targets, with added classes and callbacks to elements on scroll events. 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. 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.

5. Timeline.js

It includes plenty of visual and functional customization options. This jQuery plugin offers a twist on the carousel component: Timeline.js provides you with everything you need to create a carousel timeline.

6. Tilted page scroll

It's a great-looking effect that's nice and easy to implement. 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.

7. Focuspoint

The great thing about responsive web design is being able to create a single page that'll look good on any device. 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. However if your site's automatically cropping images to fit certain viewports, it can often lose the focal point.

8. SVGMagic

It searches for SVG images and replaces them with PNG versions if SVG isn't 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.

9. Face Detection

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.

10. Round Slider

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. The full slider is the default setup, but you can also use it to get a quarter-circle, half-circle, and pie shapes. This circular slider enables the user to select a range of values by mousing over the circle.

SHARE THIS