20 Free JS Plugins with Incredible Effects

Home » Freebies » 20 Free JS Plugins with Incredible Effects

Looking for some free JS plugins with incredible effects? We found exactly what you need. These 20 free JS plugins are truly unique and most of all they’re free to use! Save time with these great free JS plugins.

Font-To-Width: a plugin to adjust text lines width

Font-To-Width is a script that takes advantage of large type families to fit pieces of text snugly within their containers. Unlike other text-fitting tools like FitText.js,this one does not scale the font-size, instead it chooses a width or weight variant according to what fits best, and then allows for letter- and word-spacing adjustments as needed.

Font-To-Width: a plugin to adjust text lines width

jQuery Tip Cards 

jQuery Tip Cards is a plugin for creating a card layout that let your user flip through it like you see on Google Tips.

jQuery Tip Cards plugin

Adaptive Background – JQuery plugin

Adaptive Background is a jQuery plugin for extracting dominant colors from images and applying it to its parent.

Adaptive Background – JQuery plugin

Flippin’ 3D countdown – CSS + JS

This is an interesting snippet for creating a nice flippin’ 3D countdown animation with CSS and Javascript.

Flippin’ 3D countdown – CSS + JS

Scattered Polaroids 

Here’s a flat-style Polaroid gallery effect where the items are scattered randomly in a container. When a specific item is selected, it will move to the middle while the other Polaroids will make space for it by moving to the sides.

Scattered Polaroids gallery effect

Book preview with BookBlock

This is a tutorial for creating a “look inside” effect for book previews created with the BookBlock script. It shows a grid of books with the options to view the details and to look inside of the book, opening the BookBlock in fullscreen and allowing for a 3D page navigation.

Book preview with BookBlock

scrollReveal.js – On-scroll reveal animations with JS

scrollReveal.js is a javascript plugin for creating nice animations and maintain how elements fade in, triggered when they enter the viewport.

scrollReveal.js – On-scroll reveal animations with JS

ElastiStack – JS dragging interaction

ElastiStack is a little script that let’s you navigate through a stack of items by dragging away the first one.

ElastiStack – JS dragging interaction

Offline.js – Every app goes offline

Offline.js is a library to automatically alert your users when they’ve lost internet connectivity. It captures AJAX requests which were made while the connection was down, and remakes them when it’s back up, so your app reacts perfectly. It has a number of beautiful themes and requires no configuration.

Offline.js – Every app goes offline

At.js – Autocomplete library

At.js is a github-like textarea autocomplete library supporting ContentEditable mode too. It depends on Caret.js.

At.js – Autocomplete library

fullPage.js – Fullscreen scrolling pages

fullPage.js is a jQuery plugin for creating stunning fullscreen scrolling websites as if they were slides. You can move vertically and horizontally inside the pages clicking on the icons or using the arrows of your keyboard.

fullPage.js – Fullscreen scrolling pages

FlowType.js – Auto adjust font size plugin

FlowType.js is a javascript plugin for automatically adjust font-size and line-height in relation to an element width.

FlowType.js – Auto adjust font size plugin

Vex – JS dialog library

Vex is a modern dialog library which is highly configurable, easily customizable, and gets out of the way. This has a clear and simple API, works on mobile devices, and can be customised to match your style in seconds.

Vex – JS dialog library

One page scroll – jQuery plugin

Here is an awesome jQuery plugin for creating an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin.

One page scroll – jQuery plugin

BackgroundCheck JS

BackgroundCheck is a javascript plugin for automatically switching to a darker or a lighter version of an element depending on the brightness of images behind it.

BackgroundCheck JS

Parallax.js

Parallax.js is a small, simple JavaScript library that reacts to the orientation of a smart device, offsetting layers depending on their depth within a scene.

parallax-js

Favico.js – Animated badges for favicons

Favico.js is a plugin for animating your favicon with badges. You can customize type of animation, background color and text colour.

favico-js

Cowerflow style with CSS3 and Javascript

This is an iTunes-style coverflow made with CSS3 and some lines of Javascript.

Cowerflow style with CSS3 and Javascript

Jelly Scroll effect

Here is a wonderful “jelly” scroll effect for websites and apps made with Javascript.

Jelly Scroll effect

Paral & Lax – Easy parallax effect

This free snippet is a cool and simple parallax effect made with some lines of CSS and jQuery.

Paral & Lax – Easy parallax effect

Author
Iggy
Iggy is an entrepreneur, blogger, and designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design fonts, themes, plugins, inspiration, and more. You can follow him on Twitter

Leave a Comment