Menu

10 Awesome Techniques and Examples of Animation with jQuery

Advertisement

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.

This was published on Nov 1, 2009

63 Comments

Andy Feliciotti Nov 01 2009

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

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

Thanks, really cool!!!

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

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

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

thx

Darren Taylor Nov 02 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!

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

Kurt Avish Nov 02 2009

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

Jannis Gerlinger Nov 02 2009

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

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

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

donotfold Nov 02 2009

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

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

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 Nov 02 2009

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

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.

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

http://neverforget.us

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 Nov 02 2009

Wow!! superb list!! thanks for sharing

Design Informer Nov 02 2009

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

Keep it up with the awesome content Mr. Jacob.

Great post! I really liked the postcard.

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

Nice

Superb list and great post.

Sneh Roy Nov 02 2009

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

DJ Designer Lab Nov 02 2009

Very Very Nice Collection

Aknosis Nov 03 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.

Tks,it’s realy useful!

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.

awesome list thank you.

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

Mike Smith Nov 06 2009

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

Johnson Koh Nov 10 2009

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

Nice round up! I love JQuery’s animation functions

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

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

Create a pointer trails with Jquery.

Fraz Ahmed Jan 09 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 Mar 24 2010

Muy buenos los ejemplos de Jquery gracias….

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 Jul 18 2010

Yes JQuery can create magic

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

Gr8 article. Thanks for sharing it.

ntguzel Sep 02 2010

great. thanx.

csshunt Sep 03 2010

nice post see many thing first time

Web design hippo Sep 23 2010

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

Joel Kerry Jan 14 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 Jan 31 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 Feb 07 2011

Really Superb…

Internialux Feb 23 2011

Very nice recopilation! Thank you!

Anis Info Jun 10 2011

Nice, really helpful. Thanks.

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

chestaz Jun 24 2011

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

Razibul Hassan Jul 05 2011

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

Razibul Hassan Jul 13 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 Jul 21 2011

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

vinit pratap singh Aug 02 2011

jQuery changed the web world. love it.

Razibul Hassan Aug 06 2011

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

dhanesh mane Sep 11 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 Oct 31 2011

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

A very nice collection, thank you!

This comment section is closed. Please contact us if you have important new information about this post.

Advertisements
Partners