Best jQuery Animation Plugins & Tutorials with Demo

    CSS3-Powered Presentation Framework : Impress.js

    January 5, 2012 | Animation, Core Java Script, CSS2 / CSS3.0, Gallery, Slider
    CSS3-Powered Presentation Framework : Impress.js

    A new presentation framework is released recently -named Impress.js– which enables us to build very beautiful outputs.

    Slides can be by positioned, rotated and scaled on an infinite canvas with zoom in/out and 3D effects by making use of CSS3 transforms and transitions to create the awesomeness (which makes it only compatible with WebKit and the latest Firefox + IE browsers).

    And, for older browsers, Impress.js fallbacks to a standard presentation without the effects but by keeping the functionality.

    Read More Demo

    Scrollorama jQuery plugin for doing cool scrolly stuff

    January 4, 2012 | Animation, Plugins, Web
    Scrollorama jQuery plugin for doing cool scrolly stuff

    Scrollorama jQuery plugin for doing cool scrolly stuff like transitions,fade in, rotate in, fly in, zoom in, parallax

    Read More Demo

    Easy CSS3 & jQuery tooltips

    January 1, 2012 | Animation, CSS2 / CSS3.0, Web
    jquery css3 tooltip

    There’s no need to explain what a tooltip is and you already know that using tooltips can help you increase usability. Therefore, in this article we’ll concentrate just on the practical side.So, today you’ll learn how to create awesome CSS3 & jQuery tooltips.

    The major advantages of these tooltips are:

    • the simplicity to use (as you’ll see below)
    • they are animated using CSS3
    Read More Demo

    jQuery Custom preloader effect

    January 1, 2012 | Animation, CSS2 / CSS3.0, Web
    jQuery preloader effect

    In this experiment I would like to show you how to create a custom preloader animation effect with jQuery.

    Read More Demo

    Roundabout is a jQuery plugin

    December 24, 2011 | Animation, Carousel, CSS2 / CSS3.0, Gallery, Plugins, Slider
    Roundabout is a jQuery plugin

    Roundabout is a jQuery plugin that easily converts unordered lists & other nested HTML structures into entertaining, interactive, turntable-like areas.

    It’s ready-to-go straight out of the box, but if you want to get crazy, Roundabout is highly-customizable with an extensive API that allows for some pretty amazing results.

    Read More Demo

    Tutorial: Getting Started With jQuery Animations

    December 22, 2011 | Animation, Plugins
    Tutorial: Getting Started With jQuery Animations

    jQuery. No doubt you have heard about this popular JavaScript library. It has taken the throne of all the JavaScript libraries out there because of its many features and easy syntax. Today, I will show you one of the simpler uses of jQuery: you can animate things. this will be the focus of today’s tutorial.

    Read More Demo

    Path App Fly-out Menu using CSS3 & jQuery

    December 20, 2011 | Animation, CSS2 / CSS3.0, Menus
    jquery css3 fly-out menu

    I am a huge sucker for great ui design so I fell in love. The thing that really stole my focus was the awesome fly-out menu that is in the bottom left corner. This button is the main means of navigation in this app. It had not only some good features but also had smooth animations as well. Me being a noob to application development, googled if it was made in phone gap due to it heavy customization and no it wasn’t. It ‘apparenly’ has too advanced animations.

    Read More Demo

    Experimental CSS3 jQuery Animations for Image Transitions

    December 20, 2011 | Animation, CSS2 / CSS3.0, Gallery
    Experimental CSS3 jQuery Animations for Image Transitions

    Today we want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery. We’ll be using CSS3 3D Transforms for Webkit only. Check out the Photo Transitions at the Safari Technology Demos site, some of which we got inspired by.

    Read More Demo

    Easily animate box shadows in jQuery

    December 18, 2011 | Animation, Plugins
    jQuery box shadows animation

    With this jQuery plugin, you can extend the animate function to support the CSS box shadow-property. You can animate the color, the x- and y-offset, the blur-radius and spread-radius. Mark Carver contributed code to support rgba-colors (the alpha channel).

    Read More Demo

    Textualizer a jQuery text animation plugin

    December 17, 2011 | Animation, Plugins, Text Effect
    Textualizer a jQuery text animation plugin

    Textualizer is a jQuery plugin that allows you to transition through blurbs of text.Textualizer currently has the following effects: fadeIn, slideLeft, slideTop, and random. You can choose which effect to use by setting the effect option.

    Read More Demo