It is a fantastic library for designing and developing user interactions quickly. Whether it's an image gallery or form, content-revealing CSS animation or an explosion effect, the library provides the core building-blocks to allow you rapid prototyping and to deliver a unique user interface with the minimum of code and effort.
This presents an interesting question, however. Just because you can roll your own solution to any given problem, does that mean you should? Of course not! There's absolutely no need to reinvent the wheel every time you want to create a bit of common functionality; use plugins to instantly add a behaviour. Doing so will save you even more time and effort! Here's our list.
Slinky is an elegant, timeless menu design that's useful for any scenario in which you've got a lot of sub-menus. Select an item and an animation slides the sub-menu over. There's a demo here.
Instead of placing two images side-by-side to show the differences between them, you can use this plugin which places one on top of the other. Users drag a slider so that the bottom image shows through, enabling them to see what has changed in a before-and-after situation.
Hierarchical display animation effects can be used to guide users' attention and lead them from one point to the next in a process. This animation can be customised to suite your design, and has great documentation to get you going.
As the name suggests, Tabslet is a lightweight plugin for making tabs. It supports next/previous controls, rotation, custom events, deep linking and there’s lots of other useful functionality. Have a look at the demo to see if it suits your needs.
Readable helps to make sure your text blocks stay within the optimum parameters for readability; too narrow or too wide makes your paragraphs harder to scan. There’s a great demo that shows you the edits made to running copy in order to make it easier on the eye.
nanoGALLERY is designed to simplify your image galleries. Featuring multi-level navigation in albums, lightbox, combinable hover effects on thumbnails, slideshow, fullscreen, pagination, image lazy load, themes, bootstrap compatibility, deep linking, customizable, i18n, and pulling in Flickr/Picasa/Google+ photo albums among others.
It is touch enabled, responsive, fast and it supports cloud storage.
Tooltipster is a modern take on the classic tool-tip, allowing you to present fully HTML-enabled tooltips in semantic markup with CSS used to control the display. There are a wide range of configuration options, making it customisable for any scenario.
08. Magnific Popup
This is a lightbox plugin for jQuery that focuses on being as lightweight and compatible as possible. The developer has concentrated on performance and user experience, so it doesn't have all the features of alternative lightbox plugins, but it is super-fast and works perfectly across a huge range of devices, including High-DPI (Retina) devices such as the MacBook Pro.
This simple little plugin is an image slider without the bells and whistles. It only slides, but as a consequence it's tiny in size and super-responsive. Slides can contain HTML, be configured with CSS and there's built-in keyboard-control support too.
10. Avgrund Modal
This beautiful modal-window popup adds a bit of wow to your pop-up content by blurring the page content and pushing it back in Z space, before bringing up the modal dialog. A great, lightweight solution to making your alerts really pop.
11. jQuery Knob
jQuery Knob takes input elements and converts them into touch-friendly dials that also work on the desktop. This is an excellent example of how you can tailor your content to suit new paradigms, and is worth a look for the technical approach if nothing else.
The product of Twitter's development team, Type Ahead is an easy-to-implement tool that pulls from a local or external data source as your user types in to an input box, providing auto-complete suggestions as they go.
13. Scroll Path
Scroll Path is a lightweight plugin that allows you to define custom scroll paths for your content. Canvas is used to generate paths, and in compliant browsers it also allows you to rotate content in-situ for pleasing user interactions.
Lettering.js provides granular control over individual characters in your type, allowing you to apply kerning, colour individual letters, and apply event-listeners. It also plays nicely with FitText, giving you desktop-style control over your typography while remaining responsive.
This handy plugin allows you to fill your container's width with your type but automatically scaling the text size up or down to suit. Designed to facilitate responsive headlines, the plugin also integrates with Lettering.js to allow for granular per-character styling.
Words: The Creative Bloq team
This is an updated version of an article that previously appeared on Creative Bloq.
Liked this? Read these!