10 Awesome Techniques and Examples of Animation with jQuery

November 1st, 2009 by Kawsar Ali | 39 Comments | Stumble It! Delicious

jQuery can pretty much do anything you can think of. All you need is a creative imagination and some time to learn the simple and intuitive API.

In this article, we share with you some innovative uses of jQuery in animating web design elements. You’ll read about some interesting techniques, tutorials, and examples that will show you how to create similar effects on your own websites and web apps.

1. Puffing Smoke Effect in jQuery

This example by Dutch web developer Gaya Kessler features an impressive animation effect of cartoonish smoke emanating from factory smoke stacks. Kessler thoughtfully supplies a configurable jQuery plugin with instructions based on his site’s header, so that you may create a similar animation effect for your website.

Live Demo: Smoke Effect

2. Crafting an Animated Postcard

Sam Dunn of the web development duo, Build Internet, wrote a tutorial on how to create an animated landscape using transparent PNG images. The tutorial takes advantage of the popular jQuery Easing plugin to help with the animation and the setTimeout() JavaScript function to time the events accordingly.

Live Demo: Animated Postcard

3. Create a Realistic Hover Effect

In this tutorial, you will learn how to animate image elements in a smooth and fluid manner. The tutorial features objects that, when hovered on, rises upwards. In the live demo of the effect, notice how the reflections and shadows at the bottom also changes when the object lifts up; hence "realistic" in the name of the technique.

Live Demo: Realistic Hover Effect

4. Scrolling Background Effect

The creators of the site youlove.us shares their code (and explanation) for making a seamless vertical scrolling CSS background; featured on the site’s header. The script is also dependent on the user’s system time; the animation starts at a different position depending on whether you visit the site at night or in the morning, a nice touch.

Live Demo: youlove.us (web page header)

5. Multiple Animations with Glimmer

Glimmer, a JavaScript animation creation tool that leverages the jQuery library, has several live demonstrations for some of the things you can do with the app. For instance, with Glimmer, you can create cool animation sequences or make a spiffy and impressive rotating banner for your website.

Live Demos: Freestyle Sample, Image Sequence Sample, Fade Text Sample

6. jQuery Blend

jQuery Blend is a plugin for animating CSS background images. The project emphasizes on web development best practices such as progressive enhancement so that users with JavaScript disabled are still able to interact with your interface, albeit without the animation effects, making for a truly universal design.

Live Demo: website navigation with different options

7. Parallax Scrolling Background

In this jQuery tutorial, you will learn how to construct a Parallax Scrolling background – first popularized in web interfaces with the use of Flash. The technique involves div elements with CSS background images. The Parallax Scrolling technique requires the scrollTo plugin by Argentinean Web Developer and Game Programmer, Ariel Flesler.

Live Demo: Scrolling Clouds

8. Stunning Sliding Door Effect

Designer and Developer Kevin Liew shows other website builders how to create a striking animation effect where a top image splits up into four pieces, moving smoothly to the corners, and revealing another image beneath it. It’s an animation effect suited for interactive thumbnails of images.

Live Demo: Sliding Door Effect

9. Make Your Header Responses to Mouse Movements

In this jQuery animation technique, you will learn how to animate a set of images that reacts to the user’s mouse movements. When the user hovers over a set of images, the set begins to follow the mouse cursor. This technique can be adapted to many user interface related functions, or you can just use it to impart a memorable experience to your users.

Live Demo: parallax

10. Animated Header Using jQuery

This animated tutorial goes over a similar concept to the youlove.us example of vertically moving a large CSS background image. Illustrations on how the technique works will help readers grok the concept more fully. Devirtuoso, the author of the tutorial, goes through due diligence by offering an IE6 hack for backwards compatibility.

Live Demo: Animated Header

Can jQuery replace Flash? Do you know of other impressive uses of jQuery to animate page elements? Why don’t we talk about it in the comments? *Co-written by Jacob Gube

About the Author

Kawsar Ali is a web designer, graphic designer, and wannabe photographer based in NY, U.S. He’s also the founder of Desizntech, a site to find tips about web design, Mac, PC and more. If you’d like to connect with him, you can follow him on Twitter or at his Personal Website.

39 Comments

Andy Feliciotti

November 1st, 2009

This would have helped a week ago when I added scrolling clouds to my portfolio haha

Juan

November 1st, 2009

nice post… i know some of this sites, but not all… thanks!!

Tung

November 2nd, 2009

Thanks, really cool!!!

Gaya

November 2nd, 2009

Thanks for the include Kawsar! Really good collection of animations. Thanks again

Janko

November 2nd, 2009

Nice showcase, I really like Gaya’s puffing smoke effect.

Andre

November 2nd, 2009

awesome effects. didn’t know that this is possible with jquery. i just used it for more simple things :-)

brum

November 2nd, 2009

thx

Darren Taylor

November 2nd, 2009

#4 scrolling background effect on youlove.us is excellent, however I found #9 very very irritating, it was like the old mouse trail effect popular in the late 90s only worse!

Tyler

November 2nd, 2009

I agree wuth Darren Taylor, number 9 was pretty horrible.

Kurt Avish

November 2nd, 2009

Excellent list mate. I like number 10 in particular. Simple but cool. Gonna implement that on my blog soon.

Jannis Gerlinger

November 2nd, 2009

A very lovly collection! I like to use one of these for my next project !

John

November 2nd, 2009

#4 scrolling background effect on youlove.us makes my CPU go to 100%

Paul

November 2nd, 2009

The youlove.us effect is really great. Nice article :)

donotfold

November 2nd, 2009

Check out this Dutch Nokia site http://www.comeswithmusiclaunch.nl too!

Chris

November 2nd, 2009

great job! I will definitely be looking for more posts like this!

Greg

November 2nd, 2009

These can come in really handy; though what makes me cringe the most is people who take a bunch of these and litter them all over their website in a tacky Geocities (rest its web-soul) fashion

Chris Pierre

November 2nd, 2009

Really Nice Collection! I really like the scrolling background technique. Especially used in the YouLove.Us website.

Stefan

November 2nd, 2009

Please have a look at my scrolling background effect. it workes together with the jQuery.Scroll-Plugin. Please use the arrows to scroll through the projects.

http://raumsicht.com/projekte.3.0.html

have fun.

dave

November 2nd, 2009

Nice series. Here’s a nice example of jparallax in action:

http://neverforget.us

Mark

November 2nd, 2009

Great list, thanks.
I’ve just published a tutorial for an effect just like these – an extension to the youlove.us one with randomisation and overlay effects added. Looks like it was badly timed to miss out on this post!

Link: http://bit.ly/1AfKXZ

Vipul Limbachiya

November 2nd, 2009

Wow!! superb list!! thanks for sharing

Design Informer

November 2nd, 2009

WOW! Awesome collection here. I really liked the Javascript smoke. Very impressive.

Keep it up with the awesome content Mr. Jacob.

Justin

November 2nd, 2009

Great post! I really liked the postcard.

Melody

November 2nd, 2009

Hmm, seems like some great sites to add to the favorites!

Djb

November 2nd, 2009

Nice

Superb list and great post.

Sneh Roy

November 2nd, 2009

wow, really great roundup of some useful stuff! Thanks Kawsar :)

DJ Designer Lab

November 2nd, 2009

Very Very Nice Collection

Aknosis

November 3rd, 2009

Visually stunning and fun especially to accomplish these tasks without flash. However I wouldn’t use any of these or any long (more than 5 seconds or so) jQuery animation as it is VERY easy to peg the cpu. Although it doesn’t cause me any issues with my computer, anyone with a single core out there can easily hang on such (seemingly simple) animations.

It is just how it is accomplished for the most part, a really quick interval is set to smoothly animate stuff. It works well in small bursts (slides/hides/shows/fades/accordians/etc.) but when you have any long term or infinite looping animations you may be losing some underpowered computer users.

Just something to consider that I feel alot of web developers forget to think about.

steven

November 3rd, 2009

Tks,it’s realy useful!

qim

November 3rd, 2009

I once did a complete rework of a flash site with HTML and jQuery to demonstrate the client that it’s possible (and easier to handle via a CMS instead of filling the content with XML). The flash was very complicated including slides, fade-ins and animations creating each page.

I was very proud of the thing, but the client didn’t like it, because in his opinion Flash is fancier than HTML.