Apr 14

20 Smart and Free JS Effects and Plugins

Tue, 04/14/2015 - 16:51 — julie

JavaScript is used to engage users and make them remember your site. It can be used to create games, APIs, animations, dynamic effects and much more.

We selected 20 smart and free JS effects and plugins. These free JS effects can be easily used by web developers and added to their new web design projects. These free JS effects and plugins can be used for creating menu animations, modal windows effects, content filters, preloaders, typography effects, sliders and more.

Waste no more time and ger these free JS effects and plugins right now!

Slideout.js – Touch navigation menu

This is a touch slideout navigation menu for your mobile web apps. It has many great features such as: Dependency-free, Simple markup, Native scrolling, Easy customization, CSS transforms & transitions, Just 4 Kb!

Slideout js – Touch navigation menu

Trampoline effect with CSS and SVG

This is a fun trampoline effect you can add to your website designs. Drag the stack or click the button to navigate.

Trampoline effect with CSS and SVG

Morphing modal window

This is an awesome morphing modal window effect. Very eye-catching. You can use it for free in your own designs as well.

Morphing modal window

Content filter with CSS & jQuery

This is a simple content filter script. It has subtle transitions and is very user friendly. Use it in your own work as well, for free!

Content filter with CSS & jQuery

Material Design preloader

This is a  jQuery plugin that recreates the Material Design preloader (as seen on inbox).

Material Design preloader

Datedropper – jQuery plugin

Datedropper is a jQuery plugin that provides a quick and east way to manage dates for input fields. Check it out in the link above.

Datedropper – jQuery plugin

TheaterJS – Typing effect plugin

TheaterJS is a typing effect mimicking human behavior. Full documentation on usage, configuration, features and so on is available

TheaterJS – Typing effect plugin

PhotoSwipe – JS photo gallery

This is a JavaScript gallery, no dependencies. All basic gestures are supported: flick to the next or previous image, spread to zoom in, drag to pan, pinch to zoom out or close, tap to toggle the controls, double-tap to zoom.

PhotoSwipe – JS photo gallery

Vivus.js – SVG animation

Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn. There are a variety of different animations available.

Vivus js – SVG animation

lazySizes – Lazy load JS plugin

lazySizes is the ultimate and lightweight lazyLoader which lazy loads images (including responsive images (picture/srcset)), iframes and scripts. It is written in VanillaJS and with high performance in mind.

lazySizes – Lazy load JS plugin

Strip – Responsive lightbox plugin

Strip is a Lightbox that only partially covers the page. This makes it less intrusive and leaves room to interact with the page on larger screens while giving smaller mobile devices the classic Lightbox experience.

Strip – Responsive lightbox plugin

Midnight.js – jQuery plugin to switch headers

Midnight.js lets you switch fixed headers on the fly. Create your fixed nav (or header) as you typically would. You can use whatever markup suits you, just make sure the header works well with position:fixed. Find out more in the link above.

Midnight js – jQuery plugin to switch headers

Ideal Image Slider

The aim behind the Ideal Image Slider was to create a slider which has just the right amount of features, with no bloat and be easy to extend so that more features can be added as “extensions”.

Ideal Image Slider

uilang – Build UI components

This is a minimal, ui -focused programming language for web designers. Create popovers, tabs, galleries, overlays and more using a language specifically designed for this. No programming experience is required.

uilang – Build UI components

Particleground – Particle backgrounds with jQuery

This is a JavaScript plugin for snazzy background particle systems.

Particleground – Particle backgrounds with jQuery

pagePiling.js – Plugin for scrolling sites

Create an original scrolling site with this great free JS plugin. Pile your sections one over another and access them scrolling or by URL! Plenty of options, methods and callbacks to use.

pagePiling js – Plugin for scrolling sites

flowupLabels.js – Labels like placeholders

This script augments form labels to behave like placeholders, but with a twist. This implementation accounts for pre-filled elements on page load (toggleable).

flowupLabels js – Labels like placeholders

Full screen vertical scroll – jQuery

This is a simple full screen vertical slider using CSS3 transitions followed up by a jQuery fallback. Bound events support mousewheel, click and drag, arrow keys and touch gestures.

Full screen vertical scroll – jQuery

baguetteBox.js – Javascript lightbox

This is a simple and easy to use lightbox script written in pure JavaScript. It has multiple-gallery support, allows custom options for each and also supports swipe gestures on touch-screen devices.

baguetteBox js – Javascript lightbox

Page loading effects with SVG

Here are som modern ways of revealing new content. Check them out!

Page loading effects with SVG

The post 20 Smart and Free JS Effects and Plugins appeared first on Web Design Blog | Magazine for Designers.

Copyright 2009. E-mail Me
Auto Spare Parts