26 Modern jQuery Plugins To Make Your Website Better

Everyone wants their website to run on all devices to grab more exposure and jQuery helps you do the same. It’s a JavaScript library built to simplify the client-side scripting of HTML. It helps you to create animations, make navigation easy, handle events and develop Ajax applications.

The quality and quantity of jQuery plugins never cease to amaze us. There is no need to reinvent the wheel every time you create a similar function – use plugins to instantly add a feature. We are presenting some useful, modern jQuery plugins that will help you to make your website even better. Have a look!

26. Tooltipster

Tooltipster

Tooltipster is simple yet clever jQuery tooltip plugin that allows you to present HTML enabled tooltips in semantic markup with CSS used to control the display. There is a wide range of customization options available there.

25. Spectrum

Spectrum

Spectrum is a dynamic and colorful jQuery plugin for adding subtle color transition to your web application. You just need to substitute the RGB values (in jquery.spectrum.js file) to change the color.

24. SlickNav

slicknav

SlickNav is a responsive mobile menu packed with numerous features including simple markup, access through keyboard, cross browser compatibility, multi-level menu support and more.

23. Unslider

Unslider

This is super-tiny , tested in all latest browsers. The plugin stylishly transition heights with no extra code. If you wish, you can add keyboard arrow support. And yes, it’s responsive.

22. Hover Effect Builder

Hover Effects Builder

Hover effect builder is a premium WordPress plugin (available at $22) packed with 60 effect templates. It features built-in editor, social share buttons, 2d/3d rotation effects, image animation effects, typography and customizable shortcode, foreground and background colors.

21. jQMeter

jQMeter

jQMeter is a lightweight plugin that allows you to display animated vertical or horizontal progress bars/meters. You need to create a target wrapper element and pass the element’s id into the jQMeter method, the rest is optional.

20. Responsive Full Width Tabs

Responsive Full Width Tabs

This is full width tab component for adjusting the icons of the tabs and content layout. The aim is to show only icons on mobile and allow the text to appear when there is enough space available.

19. AnimatedModel

AnimatedModel

AnimatedModel is a jQuery plugin to create a fullscreen model with CSS3 transition. You can also create your own transition. Just customize the target, choose background color and create transition for model in & out.

18. Dropzone

Dropzone

Dropzone is an easy to use drag-drop JavaScript library with image previews and nice progress bar. It supports large, multiple files and synchronous uploads. The files get uploaded to the server via Ajax.

17. Scroll Path

Scroll Path

Scroll path is simple and lightweight plugin that lets you define a custom scroll path for your content. It uses the canvas flavored syntax for drawing paths.

16. Gooey Menu

Gooey Menu

A gooey/gummy menu (available at $9) with circles as menu items. It features 6 menu styles, responsive layout, cool effects (using SVG filters) and over 15 customizable options.

15. Gridder

Gridder

Gridder.js displays the thumbnail grid expanding preview (similar to Google images). It allows you to see more details (with a larger image) without having to reload a new page.

14. Mmenu

Mmenu

This app look-alike on- and off-canvas menu with sliding submenus for webapp and website. There are a wide range of configuration options and add-ons available.

13. SimpleFilter

SimpleFilter

SimpleFilter.js is a simple plugin with a library of photo filters for your website. You can choose from eight different filters and six modifiers to create subtle effects.

12. Magnific Popup

Magnific Popup

Magnific popup is a fast, lightweight plugins focused on performance and user experience. It features form popup, Ajax popup, zoom gallery, dialog with CSS animation, popup with map or video and also works with Retina devices perfectly.

11. Count Everest Countdown

Count Everest Countdown

This is a responsive countdown script that can be integrated into your own markup. The plugin has 12 themes, available at $6. It is extensible with callback function and provides many customizable options.

10. Prism Effect Slider

Prism Effect Slider

This is a unique plugin to create a slider with a prism effect using HTML5 canvas and a layering technique. The aim is to place a shape in front of the slider and reflect the picture of each slide, in order to generate the illusion of a prism.

9. Shifting Material Button Modal

Shifting Material Button Modal

This is Shifting Material Button Modal (by Ettrics) designed by Arjan Jassal. The structure includes 2 buttons and their inner content (placed outside the container) gets shown when button expands to a model.

8. Lettering.js

lettering js

This is a lightweight jQuery plugin for radical web typography. It provides granular control over individual characters; you can apply event listener, kerning and color to each character.

7. Fixed Background Effect

Fixed Background Effect

This is a simple template that takes advantage of the CSS property “background attachment” to create fixed background effect. The only asset you need is different images of the same size and an element in common in the same position.

6. Google Now Cards

Google Now Cards

Google Now Cards is a fun way to represent essential information to your users. The jQuery plugin rotates and translates the card by 180 degrees, thus revealing the back with an awesome effect.

Also Read: 35 Great Resources for Google Material Design

5. 360° Panoramic Viewer

360 Panoramic Viewer

The plugin manipulates panorama image (series of images combined together), uses jQuery to rotate, add hotspots and integrate it on touchpads, mobiles and desktop browsers. It is packed with smart preloader and auto-scroll with sliding control.
Price: $8.

4. Loader.css

Loader CSS

Loader.css is a collection of loading animation, written in CSS. Each animated element is limited to a tiny subset of CSS properties in order to avoid layout calculation and expensive painting.

3. jQuery Knob

jQuery Knob

jQuery Knob takes input elements and converts them into touch friendly dials. It has canvas based knobs (no jpg or png sprites) that supports touch, mouse (plus mousewheel) and keyboard events.

2. Responsive Tabbed Navigation

Responsive Tabbed Navigation

This is a handy tabbed navigation (for both vertical and horizontal menu positioning), optimized for mobile devices. You can use it on the product page, dashboard and blogs.

1. Material Design Expanding Overlay

Material Design Expanding Overlay

This is material design inspired expanding overlay for showcasing articles, projects, presentations, products and more. The plugin uses index of the block, corresponding content and width of the window to generate this expanding overlay effect.

Other Helpful Articles:

  1. 40+ Useful JavaScript Frameworks for Developers
  2. Node.js Frameworks for Developing Web Applications
Written by
Varun Kumar

I am a professional technology and business research analyst with more than a decade of experience in the field. My main areas of expertise include software technologies, business strategies, competitive analysis, and staying up-to-date with market trends.

I hold a Master's degree in computer science from GGSIPU University. If you'd like to learn more about my latest projects and insights, please don't hesitate to reach out to me via email at [email protected].

View all articles
Leave a reply

2 comments
  • TheBlackBird says:

    Thank you! Awesome list oft awesome Plugins!

  • Thanks! I was searching for something like AnimatedModal and MagnificPopup and this article helped me a lot!