Best jQuery Animation Plugins & Tutorials with Demo

    jQuery Digital rain

    jQuery Digital rain

    Generates the falling digital rain effect seen in The Matrix movies inside a div tag.

    • Randomly generated
    • Customizable number of rows, columns, font color, font size, background color, height of each ‘rain droplet’, frequency of raindrops, and their falling speed
    • Can be placed in multiple div tags on the same page

    Rotating Image Slider with jQuery

    Rotating Image Slider with jQuery

    In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will also add an autoplay option and the mousewheel functionality.

    We’ll use the jQuery 2D Transformation Plugin for rotating the images and the jQuery Mousewheel Plugin by Brandon Aaron for the mousewheel control.

    Skitter jQuery Slideshow Plugin

    Skitter jQuery Slideshow Plugin

    Skitter is a jQuery plugin that enables us to convert unordered lists into slideshows with attractive animations.

    The slideshow can display the list of slides as numbers or thumbnails and items can be browsed with the help of prev-next buttons as well.

    It has many original animation types including cube (with various sub-types), tube, block and more…

    jQuery Sliding Pictures Menu

    jQuery Sliding Pictures Menu

    This is a jQuery plugin that makes a beautiful sliding menu with pictures.

    Zoomooz a jQuery Plugin

    jQuery page zoom plugin

    Zoomooz is an easy-to-use jQuery plugin for making any web page element zoom.

    A Snazzy Animated Pie Chart with HTML5 and jQuery

    A Snazzy Animated Pie Chart with HTML5 and jQuery

    In this tutorial I’m going to show you how to build a lovely, interactive pie chart using the latest HTML5 technologies. Not that long ago, this kind of thing was only practical to do with Flash. Now, thanks to advances such as the HTML5 canvas element, we can create pretty nifty animated effects using nothing but JavaScript, CSS, and a small sprinkling of maths!

    Drag-and-Drop with jQuery: Your Essential Guide

    Drag-and-Drop with jQuery: Your Essential Guide

    Learn how to use jQuery, and the jQuery UI Draggable and Droppable plugins, to create drag-and-drop interfaces in your web pages. Includes a full drag-and-drop card game example.

    Vintage typewriter: The sexiest jQuery contact form ever

    Vintage typewriter: The sexiest jQuery contact form ever

    On today’s tutorial we will take a step aside of our classical design tutorials and will be focusing more on the programming part, we’re about to show you how to develop an awesome typewriter experiment with all the primary functions fully operational thanks to the mighty power of jQuery and CSS. But don’t think that this is pure crazy experimentation, because this typewriter can actually be utilized as a brilliant contact form to place on your different projects.

    Create a Funky Parallax Background Effect using jQuery

    Create a Funky Parallax Background Effect using jQuery

    In this tutorial, we’ll be using JQuery to take a horizontally scrolling website and add a parallax scrolling background effect reminiscent of old-school 2D platform games like Sonic the Hedgehog.

    Cloud Carousel – A 3d Carousel in jQuery

    Cloud Carousel - A 3d Carousel in jQuery

    “There are some attractive Adobe Flash based solutions for this type of UI component, and while JavaScript versions exist, the commercial Flash products tend to have better aesthetics and polish. To redress the balance in JavaScript’s favour, I have created this jQuery carousel plugin.”