50+ Essential Free jQuery Plugins and Scripts
Page Scrolling and Parallax
‘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.
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.
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.
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.
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.
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.
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.
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!
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.
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.
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.
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!
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.
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.
Galleries and Image Effects
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.
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.
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.
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!
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.
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.
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!
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.
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.
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.
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.
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.
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.’’
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.
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.
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.
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.
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.
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.
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.
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!
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.
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.
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.
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?
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.
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.
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.
You may call it an interesting experiment intended to bring to the web, the ‘pull to refresh’ feature commonly present in mobile apps.
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.
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.
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.
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.