10 Awesome Techniques and Examples of Animation with jQuery

Nov 1 2009 by Kawsar Ali | 63 Comments

10 Awesome Techniques and Examples of Animation with jQuery

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

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

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

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

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

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

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

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

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

Make Your Header Responses to Mouse Movements

Editor’s note: As of April 16, 2012, this resource no longer exists so the link has been removed.

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

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

Related Content

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.

63 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 :-)

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.

Paul

November 3rd, 2009

awesome list thank you.

nauman

November 5th, 2009

very useful examples all in one place, will be using in next project. thanks

Mike Smith

November 6th, 2009

#8 is my fav. might work out well for the redesign of my portfolio :)

Johnson Koh

November 10th, 2009

Superb list. #9 is very useful for my current project.

Martyn

November 15th, 2009

Nice round up! I love JQuery’s animation functions

Chrs

December 14th, 2009

Thank you so much! your article posts helped me to realize an amazing italian gothic icon website using scroll and jparallax: http://www.rossocarmilla.com

Motyar

January 1st, 2010

Hi
all were great examples.
I have created another effect.

Create a pointer trails with Jquery.

Fraz Ahmed

January 9th, 2010

Nice article…it seems 2010 gonna be Javascript Animations year. Here is another jQuery mouse cursor play http://www.techmug.com/jmouse-follower/

Elerman

March 24th, 2010

Muy buenos los ejemplos de Jquery gracias….

Ben

May 17th, 2010

I switched over to jquery from Flash to practice all the new cool animations we can now do, but after hearing al lthe comments about the evil Flash cpu Hog, I have been shocked to find all javascript animations wreaking carnage on my CPU making it pretty unworkable.

I think javascript animations are great for simple slide Ins, rollover effects and so on, but when you try to do anything rich, long or complex you can say goodbye to your cpu.

Which is a shame, but not wholly unsurprising.
Just shows that the truth of the matter is, some people just like bashing Flash without any good reason, and the bashing has come to light.

I’m not in either camp, because I like to use what gets the job done the best. But I have been annoyed to discover that since switching over to javascript for animation, it is simply nowhere near Flash…. and when you get close to imitating it the CPU croaks.

I’m off to hunt down some specific javascript animation libraries to see if they can do better, but people should really get a little more objective.

In the current state Flash is far from dead and its only Mr. Steve who wants it in for Adobe.

Bad Steve.

Anupam Sen

July 18th, 2010

Yes JQuery can create magic

Tobias

July 19th, 2010

Wow! Great post. Loved the one with the sliding header

nikhil

August 23rd, 2010

Gr8 article. Thanks for sharing it.

ntguzel

September 2nd, 2010

great. thanx.

csshunt

September 3rd, 2010

nice post see many thing first time

Web design hippo

September 23rd, 2010

I didn’t quite understand Glitters home page animation! Saying that, it did look like a powerful tool!

Joel Kerry

January 14th, 2011

Just looking on how many information your web page invites me to read, pushed me to get out of your page as fast as I can.

I am out of here!

Ivan Tsankov

January 31st, 2011

Really impressing indeed! Some cute little animations that you can create with Jquery. Although… everything has its own minuses.

For me… personally, Flash stays (number one) and will be the best at animations and effects for a long time. So for now I’m sticking with mighty Flash.

nivethitha

February 7th, 2011

Really Superb…

Internialux

February 23rd, 2011

Very nice recopilation! Thank you!

Anis Info

June 10th, 2011

Nice, really helpful. Thanks.

sn3p

June 16th, 2011

I did some jQuery animations to avoid Flash.
Check out the different slides in the header.
http://www.trussystem.nl

chestaz

June 24th, 2011

I did some animate polka dot using css3+ jquery
check out : http://c88i.com/project/

Razibul Hassan

July 5th, 2011

9. Make Your Header Responses to Mouse Movements is great thing to use specially on personal web sites.

Razibul Hassan

July 13th, 2011

“Scrolling Background Effect” can be very handy if adjusted professionally. That can give your site an amusing and unique feel. I enjoyed working on it….
Have fun…

dhanesh mane

July 21st, 2011

hey i like the clouds very mush. tiny small clouds looks very pretty on pages.

vinit pratap singh

August 2nd, 2011

jQuery changed the web world. love it.

Razibul Hassan

August 6th, 2011

Great.. “Scrolling Background effect” perfectly served one of our client’s website requirement. Thanks for sharing…

dhanesh mane

September 11th, 2011

Just used 6th jquery blend for one of my project. I just love the way they have done, Its really very simple to use.

Helen Neely

October 31st, 2011

Nice tricks with jQuery. Shame that I don’t do any web programming.

Greg

November 5th, 2011

A very nice collection, thank you!

Leave a Comment

Subscribe to the comments on this article.