is.js – Micro Check Library

Download Demo

is.js is a general-purpose check library without any dependency. You can check types, regexps, presence, time and more…

Packery

Download Demo

Packery is a JavaScript layout library that uses a bin-packing algorithm. This is a fancy way of saying “it fills empty gaps.” Packery layouts can be intelligently ordered or organically wild. Elements can be stamped in place, fit in an ideal spot, or dragged around.

svg Path Animation

Download Demo

svgPathAnimation is a jQuery function for animating SVG multiple path synchronously

1. INCLUDE JS FILES

<script src="jquery.js"></script> <script src="../svg.min.js"></script>

2. HTML

<svg width="100" height="100" id="example1"></svg>

3. JAVASCRIPT

var example_one = new SvgAnimation({ "elem" : "#example1", "increaseBy" : 1, "timeout" : 10 }); example_one.animate();

4. OPTIONS

var svgAnimSettings = {         "elem" : "#svg-circle",         "increaseBy" : 3,         "timeout" : 1,         "reverse" : true };

Morphing Modal Window

Download Demo

Morphing Modal Window is a call-to-action button that animates and turns into a full-size modal window.

Modal windows are used to display related content, by hiding temporarily the main content. If we imagine our web page as layers distributed along the z-axis, modal windows are on top.

With this nugget we wanted to spice-up the way we fire the modal window: the button that triggers the action animates and turns into a full-width new page. We tried something similar with the product quick view nugget.

The final result is powered by a combination of CSS transition and transformations, jQuery and Velocity.

Insignia – Customizable tag input

Download Demo

Insignia - Customizable tag input. Progressive. No non-sense!

Browser support includes every sane browser and IE7+.

Inspiration

I needed a tag input that was progressively enhanced, fast, easy to use, and reliable. Tag inputs I stumbled upon were too bloated, too dependant on JavaScript, or provided an unfriendly human experience.

The goal is to produce a framework-agnostic tag input editor that is easily integrated into your favorite MVC framework, that doesn’t translate into a significant addition to your codebase.

Features

• Small and focused
• Natural keyboard navigation
• Progressively enhanced
• Extensive browser support

Watable – A swiss army jQuery table plugin

Download Demo
Watable is a swiss army jQuery table plugin with filter, format, paginate and sort your data with ease and lightning speed.

Flickity – Touch, responsive, flickable galleries

Download Demo
Flickity makes galleries, sliders, & carousels that feel lively and effortless. You can use Flickity as a jQuery plugin.
Features:

• Physics-based animation
• Touch enable
• Responsive styling
• Full-feature API

BlinkTitle.js

Download Demo

BlinkTitle.js is a Pure Javascript Implementation of TitleBar Alert or Notification.It Can Perform Blinking of Html Titlebar When Required.

1. INCLUDE JS FILE

<script type="text/javascript" src="https://raw.githubusercontent.com/argunner/blinkTitle.js/master/index.js"></script>

2. JAVASCRIPT

Regular Blink

  blinkTitle('message1','message2',delayTime,false);

If You Want Notify When User is On Other Tab

  blinkTitle('message1','message2',delayTime,true);

Stop

  blinkTitleStop();

Image slide with single img

Download Demo

Nice image slide animation with a single img, animate css and a little jQuery

Responsive 3D Fold Animation on Scroll

Download Demo

Responsive 3D Fold Animation on scroll, very easy to use.

1. INCLUDE JS FILES

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="includes/js/responsive_3dfoldscroll.js?v=1"></script>

2. JAVASCRIPT

$( document ).ready(function() {     window.onload=function(){         var fold = $.fn.responsive_3dfoldscroll({             animationLength : 1500         });     }; });