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!
Table of Contents
26. 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 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 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
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 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 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
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 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 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 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
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.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
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.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 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
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
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
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
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
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 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
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 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 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
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
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:
Thank you! Awesome list oft awesome Plugins!
Thanks! I was searching for something like AnimatedModal and MagnificPopup and this article helped me a lot!