50+ Essential Free jQuery Plugins and Scripts
jQuery is a fantastic amalgamation of programmers that have the ability to create some incredible things. It certainly makes your life easier when it comes to increasing your browsing speed and enhancing your overall productivity. That said, when it comes to choosing the best jQuery and JavaScript Plugins and libraries, it can prove to be quite a challenge for you to separate the must-haves from the less attractive options.
Are you in a dilemma over finding some of the best jQuery and JavaScript Plugins and Libraries? If yes, this post is here to get you out of your confusion. We have classified this information for easier browsing, and if put into good use, it will make you a happier person.
So, what are you waiting for? Dive right in and check out the 50+ essential jQuery and JavaScript Plugins and Libraries for your ease of use!
Page Scrolling and Parallax
Cool Kitten:
‘Cool’ as the name sounds, the framework is fully responsive for parallax scrolling websites. It functions by organizing the sections of your web into slides, detects their visibility and updates the navigation menu.
Stellar.js:
The plugin searches for any parallax background within a certain element and changes its position when the element scrolls. Data attributes for a true parallax effect may facilitate the controlling of the element’s scroll speed.
Learn More
Super Scrollorama:
If you’re in search of a jQuery plugin for cool scroll animations, super Scrollorama will serve you well. It allows you to define animations and tweens which get triggered whenever an element comes into view.
Learn More
Scrollpath:
This is a distinct plugin that gives you the ability to define your custom scroll path. It uses canvas-flavored syntax for drawing paths and uses methods such as lineTo, moveTo, and arc. Scroll path definitely gives you something special.
Learn More
Sticky:
Standing out, this plugin gives you the ability to retain the visibility of an element whenever you are scrolling your page. The plugin is quite straightforward to use. You may only pass the option of top offset.
Learn More
Windows:
With the Windows plugin, you can build single page websites with sections that take up the whole screens. It gives you callbacks to enable you to extend it with custom navigation menus or others easily.
Learn More
Dialogs
jQuery Avgrund:
This one stands out as a cooling dialog solution. Though not feature-rich, the dialog contains an impressive animation which brings it into focus, while darkening and blurring the background. It’s an excellent feature for your web.
Learn More
Alertify.js:
Alertify.js refers to a small library for the presentation of beautiful notifications and dialog windows. It tends to be quite easy to customize with CSS, and has a simple API which does not depend on third-party libraries!
Learn More
Text Effects
Arctext.js:
This jQuery plugin enables you to arrange every letter of a curved element neatly along a curved path. It calculates the right rotation of every letter and distributes them equally across the imaginary arc of the given radius, based on lettering.js. It also applies the proper CSS3 rotation.
Learn More
Textillate.js
Uniquely, this jQuery plugin combines the power of lettering.js and animate.css so as to apply advanced animations on text elements. Applied animations are based on CSS3, making them smooth.
Learn More
Lettering.js
For better web typography, this is the excellent plugin of choice. It is simple, effective and splits the textual content of a given element into individual spans with ordinal. char# classes.
Learn More
Fittext.js:
This is a jQuery plugin designed to inflate the web type. The plugin automatically scales the text of an element to take up the full width of the container, making the layout responsive and sharp-looking!
Learn More
jQuery Shuffle Letters:
This is a demo that creates an interesting effect which randomizes the content of a text element. Also, note that the text parameter is optional, and if it is missing, the plugin will take the content of the element.
Learn More
Bacon:
Bacon gives you typographic control, along with the ability to put bacon strips in the middle of your designs. Basically, it is a jQuery plugin which allows one to wrap text around a Bezier curve or line. The illustration can be found on the plugin’s homepage.
Learn More
Galleries and Image Effects
jQuery TouchTouch:
This plugin’s demo is simple to use and works on mobile devices. The plugin uses CSS transitions to make smooth animations. Additionally, it dynamically preloads images and can be restyled by modifying a CSS file.
Learn More
Swipebox:
Like other plugins, Swipebox can be entirely customized with CSS. It is a lightbox which supports mobile devices, desktops, and tablet browsers. It is retina-ready as it understands swipe gestures and keyboard navigations.
Learn More
Threesixty.js:
This is a jQuery plugin that is responsible for creating draggable views of 360 degrees. For its proper functioning, provide a path to a collection of your product’s images and have them assembled into an interactive view.
Learn More
Swipe.js:
Distinctively different from the rest, Swipe.js is specifically designed for touch devices. It understands gestures as much as it reacts upon touch. It is compatible with browsers from IE7 onwards. It is very responsive!
Learn More
Tiltshift.js:
This is a neat plugin with the ability to replicate the tilt-shift effect by the use of CSS3 image filters. Sadly, it only works on Chrome and Safari at present. It is expected to start working on other browsers in the near future.
Learn More
iPicture:
This plugin has the ability to create interactive image walkthroughs. It gives rich content like photos, videos, and HTML. You can also customize and extend it with CSS while maintaining its ease of usage.
Learn More
Adipoli jQuery Image Hover Plugin:
Do you need to create stylish images and hover effects? Do you also want to turn images into black and white, slice and box transitions? If yes, then this is the perfect plugin for you!
Learn More
CamanJS:
This is a powerful image manipulation library. It is built on top of the canvas element. Use CamanJS to manipulate the pixels of an image and come up with something similar to photoshop-like control.
camanjs.com
SpectragramJS:
Are you a lover of Instagram? Or do you spend a significant amount of time on Instagram? This plugin makes working with the Instagram API significantly easier. It has the ability to fetch user feed and popular photos with specific tasks.
Backgrounds
Backstretch:
It stretches any image to fit the page or block element. It then automatically resizes as the element size changes. Images are fetched when your page is loaded. Therefore, you don’t have to wait for image download.
Learn More
Supersized:
It is an advanced full-screen background. It is capable of showing a set of photos as a slideshow with the full height and width of the page. It is perfect for photography, event sites, and portfolios. It contains lots of options.
Learn More
Tubular.js:
If you need to set up a YouTube video as your page background, this plugin is for you. You only need to attach it to your page wrapper element and set a few options. It also supports the controlling of video with play/pause.
Learn More
Forms
Long Press:
To write accented or rare characters, this jQuery plugin will work just perfect! You need to hold down a key while typing, and you’ll get a bar with alternative characters which you can use. It also contains a ‘‘GitHub page.’’
Learn More
jQuery File Upload:
Cross-domain, resumable and chunked file uploads, and client-side image resizing are all supported by this widget. It works with any server-side platform and is quite easy to embed into your application.
Learn More
Complexify:
It is not as complex as the name suggests. It is a plugin that assesses the complexity of passwords. Use Complexify to create passwords with a combination of numbers, upper/lowercase letters, and special symbols.
Learn More
Pickadate.js
Use it to create a responsive and mobile-friendly date selection widget. Just like many others, it can be customized with CSS and is quite easy to use. Include the .js file and stylesheet and call the plugin on your input element to make it operate.
Learn More
jQuery Knob:
This jQuery plugin turns input elements into jQuery dials that are touchable. It is also entirely customizable by setting data attributes on the inputs and is built using Canvas. Control the dials using the keyboard, the mouse or touch on mobile devices.
Learn More
iCheck:
Perfectly customizable, the jQuery plugin works well on mobile devices and comes with flat-style skins. For its usage, make sure to include js and CSS files in your page, and convert all radio and checkboxes with some lines of jQuery.
Learn More
Chosen:
It is a powerful widget capable of converting a select input into a searchable dropdown list. It is quite easy to use, and you can hook your own code. Updating the original element is made possible by the plugin as well.
Learn More
Parsley.js:
This is an unobtrusive validation form library. The library allows you to validate form fields without the need of writing even a single line of JavaScript. You only need to place data attributes in the input fields you need to become validated.
parsleyjs.org
Typeahead.js:
This is a fast autocomplete library. The library displays suggestions of the users’ type and then displays the top suggestion as a hint. It functions with hardcoded data as well as remote data and also rate-limits the network requests.
Learn More
Fancy Input:
This is a jQuery plugin with the ability to make the entering or deleting of text in a textbox uber cool. It makes use of CSS3 animations to achieve this effect. Only include JS file after jQuery, call the plugin, and you’ll be good to go!
Learn More
Grids
Gridster.js:
It is basically a plugin that allows the building of intuitive draggable layouts from elements that span multiple columns. You may dynamically add or remove elements from the grid.
Learn More
Stalactite:
This is a library that packs page content depending on the available space. However, Stalactite uses a lazy approach because it sequentially sorts elements with the scrolling of the page, but the effect is quite interesting.
Learn More
Freetile:
If you need to organize the content of your webpage in an efficient, dynamic yet responsive layout, this is the best plugin for you. More notably, it can be applied in a container element and makes optimal use of the screen space.
Learn More
MISC
Gmaps.js:
This is a library that makes it simple to work with Google Maps. With Gmaps.js, you can place markers, set the coordinates, listen for events, zoom the level, and all of that with a fluid jQuery-like syntax. It stands out as a very powerful library. Don’t you think so?
Learn More
Tooltipster:
This is also a quite powerful jQuery plugin used for displaying tooltips. The plugin works on mobile browsers and desktops, and it gives you full control over the content of the tooltips. Consider using hint.css too.
Learn More
Toolbar.js:
For you to display a neat pop-up menu, you’ll have to use Toolbar.js. You may also choose the actions and icons present in the menu, and listed for events.
Learn More
jQuery PercentageLoader:
This makes use of HTML5 canvas to provide a rich graphical appearance and with only 10 kb JavaScript file. It uses vectors so it can be easily deployed at various sizes. It is basically used for displaying a progress widget more visually.
Learn More
Social Feed:
As the name suggests, the jQuery plugin presents a feed of the latest public updates happening on social accounts. It also has a clean design, built using a template which can be easily customized.
Learn More
Hook.js:
You may call it an interesting experiment intended to bring to the web, the ‘pull to refresh’ feature commonly present in mobile apps.
Learn More
jQuery PointPoint:
This plugin helps you draw user’s attention to a specific part of the page. It also presents a small arrow next to the mouse cursor. It can be useful in pointing out the missing form fields or validation errors which require scrolling into view.
Learn More
jQuery Countdown:
This is a jQuery demo that shows the remaining time to an event. It also updates the remaining time with animation. The demo tends to be quite easy to use and includes the plugin JS and CSS files.
Learn More
List.js:
This is a library with the ability to enhance a plain HTML list coupled with features for searching, filtering and sorting the items inside it. It is possible to change items dynamically.
Learn More
Chart.js:
It is a new charting library which uses the HTML5 canvas element. The library provides fallbacks for IE7/8. Additionally, the library is fully customizable and supports six chart types which are animated! It is less than 5 kb in size.
Learn More
The content of this post has the absolute potential of solving almost all your jQuery and JavaScript related problems.
