15 Stunning Jquery Animation Techniques

Now a day most of the animations are done in jquery. If you like to create an illusion of movement in website design then you need this innovative uses of Jquery Animation Techniques.Animation techniques include 3d header,image animation,slider animation, menu etc..

3D Cloud Carousel

This is a fast and cross-browser implementation of a 3d carousel – looks very nice, more like a Flashimplementation. It can create dynamic reflections underneath the carousel items, is accessible and degrades nicely without JavaScript. Easy to use as an unobtrusive plugin with lots of options.

Demo | Download

Step Carousel Viewer

Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific content on demand, or browse the gallery sequentially by stepping through x number of contents each time. A smooth sliding animation is used to transition between steps. The contents for the Step Carousel Viewer can be defined either directly inline on the page, or via Ajax and extracted from an external file instead. In both cases, the contents are simply DIVs with a shared CSS class name that wrap around each individual content.

Demo | Download

Visual jQuery LightBox Features

Visual Lightbox is a jQuery plugin for lightbox-style photo galleries and slideshows.

Demo | Download

!Sideswap Content Rotator

Features:

* Automatically (optional) adds navigation between images/content
* HTML of the previous and next tags can be passed as parameters to the plugin
* Automatically (optional) transitions between images/content
* Duration of image/content display and transition speed can be passed as parameters to the plugin
* Called on an element containing elements that will be rotated i.e. $(‘.containing_element).sideswap();

Demo | Download

2d Transform

This plug-in utilizes the matrix filter in IE and the new CSS3 transform properties to 2d transform any DOMElement. It is fully cross-browser compatible. Special care has been taken to make IE support translate() and transform-origin. The properties can also be animated using the jQuery animation library.

$('.example').transform({rotate: 45}); $('.example').animate({rotate: '+=45deg'});

Download

Animated Collapsible DIV

This script collapses any DIV on the page and lets users manually toggle its appearance via a smooth “Web 2.0 style” animation. Three distinguishing features of this script are:

1. Ability for the script to work on both DIVs that have an explicit CSS height attribute defined, and without.
2. Ability to “group” multiple collapsible content instances to act as a single unit, so opening one closes the others.

Demo

BlogSlideShow

BlogSlideShow is a JQuery plugin that enhances your blog pages with fancy image viewer, which provides nice transition effects including CSS3/HTML5-related ones.

All what you need is to provide links on your images, you want to show. Likely you already have images on blog pages linked. Just add rel attribute containing “blogslideshow” to them.

Demo | Download

3. bxSlider | jQuery Content Slider

bxSlider is a content slider / image rotation plugin written in jQuery. Features include:

* – Slide, fade, and ticker modes
* – Fully adjustable speed and pause values
* – Manually or auto transitions

Demo

busyBox

busyBox is intended to display the HTML box(es) to be updated by an AJAX request as ‘busy’ while performing such request.

This plugin differs from others in the way it just put a transparent ‘layer’ over the involved boxes (this using a jQuery selector) instead of putting it over the entire body, in this way the user will specifically know which sections of the page are being updated.

Demo

Before/After

I was reading the New York Times online and they had an article which showed a road in Brooklyn that had been reconstructed to make it safer and more pleasing to the eye. To show the difference in the reconstruction project, they showed a before and after picture using Flash that let the visitor drag a slider over the images, which were sandwiched with one on top of the other, so that you could easily see how dramatic the changes were. I immediately thought that this could be done in JavaScript using jQuery, so I set out to do it.

Demo | Download

Background-Position Animations

Adds the ability to do background-position animations to jQuery 1.2, and newer.

$(‘#background’).animate({backgroundPosition: ‘150px 250px’});

Demo | Download

AutoSprites – Menu Sprites Animated and Generated Automatically

This jQuery plugin automatically generates animated sprites from a minimal amount of CSS. It makes building menus faster and easier while making them look cooler at the same time!

Demo | Download

Pause or Resume Animation (animate)

jQuery’s animation method doesn’t have a pause/resume. This plug-in provides 3 more methods to give a pause and resume effect to jQuery’s animate method.

Demo | Download

Mousey Dialog

mouseyDialog attempts to solve the dialog issue while keeping things simple. It’s just a dialog positioned by the mouse. Clicking the close button or outside the dialog will close it (if you’re using the click event). mouseyDialog knows where the edge of the window is and will reposition itself if it’s outside of it.