Best jQuery Animation Plugins & Tutorials with Demo

    flipCounter : jQuery Counter Plugin

    flipCounter : jQuery Counter Plugin

    flipCounter is a jQuery plugin that turns a boring ‘ole number into a big, beautiful analogue display. Count down the days until the apocalypse, make your own debt clock or throw back to the 90s and resurrect the hit-counter. The possibilities are endless!

    jQuery Animated Button & Menu

    jQuery Animated Button & Menu

    The animated button & menu jQuery plugin allows you to easily replace <a> links with animated buttons and grouping buttons into a menu.

    Features:

    • Buttons of any size.
    • Any background color, hover color and font.
    • Allows you to create animated buttons with images.
    • Create buttons with rounded corners (not supported in IE 7 and IE 8 ).
    • Transition easing for animation.
    • The button can be “selected” and “toggled”.
    • 16 different button animation effects.
    • You can determine the size of the animated elements.
    • Button autosize.
    • Fully customizable – unlimited number of button’s appearence combinations.
    • Buttons can be used in forms.
    • Buttons can be combined into a menu.
    • Package contains a plugin for building custom menus.
    • Cross-browser compatible – Animated Button is compatible with IE, CHROME , FIREFOX, OPERA , SAFARI.

    Sprite3D.js : JavaScript library for manipulating CSS 3D transforms

    Sprite3D.js : JavaScript library for manipulating CSS 3D transforms

    Sprite3D.js makes it easy to manipulate HTML elements through CSS 3D transforms using a ActionScript-like syntax and hierarchy, and a bunch of chainable accessor methods.

    A Sprite3D object is a simple wrapper around a DOM element providing helper functions and properties. You can conveniently use CSS styling to determine the aspect of you element, and CSS transitions to animate your stuff.

    In many cases, 3D transforms are GPU-accelerated, giving you an incredible performance boost.

    WaveAnimate jQuery Plugin

    WaveAnimate jQuery Plugin

    A plugin to animate a selection of elements in a waveing way, from one side to the other, a little bit like a wave, hence the name.

    SlideInReplace jQuery Plugin

    SlideInReplace jQuery Plugin

    A jQuery Plugin to replace an element with an other element in a fadeing, sliding animation. Well, feel free to style your elements however you want, just make sure that the replacement is of the same size and relatively positioned or absolutely positioned, floats won’t work correctly.

    jCS Media Library in jQuery

    jCS Media Library in jQuery

    Imagine for a moment you could create animated media, and without changing anything, it worked the same on IE7, Android, and even your iPad2. Let’s take the dream further and imagine that it does not use Flash, SilverLight, SVG, HTML5, or quirky CSS3 Animations. To start, we need a copy of the jQuery library. You should also add the jQuery easing library.

    jQuery Wiggle Plugin : A wiggle effect for mobiles

    jQuery Wiggle Plugin : A wiggle effect for mobiles

    The jQuery Wiggle is a jQuery plugin that allows you to emulate the wiggle effect icons on an iPhone have when you press and hold down on them. Click on the image in a demo to see the effect.

    skrollr : jQuery parallax scrolling for the masses with Demo

    skrollr : jQuery parallax scrolling for the masses with Demo

    Parallax* scrolling lib with zero dependencies in just over 7k minified (3k gzipped). No JavaScript skills needed.Actually, skrollr is much more. It’s a full-fledged scrolling animation library. In fact, you can use it and still have no parallax scrolling at all. But calling it “parallax” is part of my ongoing effort to play buzzword bingo as often as possible. By the way, skrollr leverages HTML5 and CSS3.

    skrollr allows you to animate any CSS property of any element depending on the horizontal scrollbar position.All you need to do is define key frames for each element at certain points in top offset. Each key frame consists of one or multiple CSS properties and values.

    Quake Slider : jQuery Image / Content Slider Plugin with Demo

    Quake Slider : jQuery Image / Content Slider Plugin with Demo

    If you are the guy who likes to focus on real business and don’t want to re-invent the wheels. Quake image slider is perfect for you. Quake image slider is a jQuery based image slider with cool animations effects and some of them are very unique. Like SwirlFadeIn, SwirlFadeOut and more.

    With Quake image slider you can combine images with short summary/caption that helps you optimize contents for search engines and make SEO easy for you. You can also link your images to open detail for particular slide/image. With Quake Image Slider you have complete control over not just the orientation of each caption also you can control animation for each caption and provide different animation for each of the slide using callbacks.

    jQuery Effect smooth scroll with Demo

    jQuery Effect smooth scroll with Demo

    The effect of scroll fluid is already built, according to your user settings on some browsers. It is manifested by a smooth scrolling of the webpage when you get off or ride through the mouse wheel, or the keys on your keyboard.You can generate this effect as clicking an anchor using JavaScript.