10 Cool jQuery Animation Tutorials

Sam Deering

Here’s our collection of what we think are the 10 best jQuery Animation Tutorials you may have NOT seen before. Some of these tutorials may seem very simple but the results are fantastic and can form the base for something truly awesome. Enjoy.

Related Posts:

1. Impressive Animated Landscape Header with jQuery

It’s a cartoon themed landscape with elements which slide out to reveal additional content. The screenshot below demonstrates the layout when fully expanded.


Impressive Animated Landscape Header with jQuery

Source
Demo

2. Puffing Smoke Effect in jQuery

Gaya Kessler features a beautiful animation effect of puffing smoke in this tutorial.


Puffing Smoke Effect in jQuery

Source
Demo

3. BBC Radio 1 Zoom Tabs

After learning this tutorial you can understand how you can make BBC Radio 1 Zoom Tabs like effect where the mouse rolls over the image block, tabs slide up and the image zooms a little to reveal more of the picture.


BBC Radio 1 Zoom Tabs

Source
Demo

4. Animated Cartoon Robot with jQuery

This project was created by layering several empty divs over each other with transparent PNGs as background images.


Animated Cartoon Robot with jQuery

Source
Demo

5. Automatic Infinite Carousel

On many websites you should see the images moving continuously and automatically. Now with this tutorial you can learn how it is done by using jQuery.


Automatic Infinite Carousel

Source
Demo

6. Scrolling Clouds

In this tutorial, you can learn how to make scrolling cloud effect using jQuery and jParallax. 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.


Scrolling Clouds

Source
Demo

7. Animate Image Filling Up Using jQuery

We will teach you how to do Animate image filling up by using jQuery. You can also see demo of the final result and also download it from the website of the author of this tutorial.


Animate Image Filling Up Using jQuery

Source
Demo

8. Create a Unique Gallery by Using Z-Index and jQuery

In this tutorial you will learn how we will combine the CSS property ‘z-index’ and the power of jQuery to create a unique gallery which has an appearance of a pile of pictures.


Create a Unique Gallery by Using Z-Index and jQuery

Source
Demo

9. jQuery & CSS Sprite Animation Explained In Under 5 Minutes

We’ll going to show you what a sprite is and just how easy it can be to create an entire animated scene using jQuery, CSS & Sprites.


jQuery & CSS Sprite Animation Explained In Under 5 Minutes

Source
Demo

10. Multiple Animations with Glimmer

Glimmer is a JavaScript animation creation tool that lets you create amazing animations.


Multiple Animations with Glimmer

Source + Demo

Win an Annual Membership to Learnable,

SitePoint's Learning Platform