Stunning jQuery animations
written by Nikola LazarevicOnly a few years ago, when you think about animation on the internet, the first tool that come to mind is Flash. This is not the case today. It has only been in the past couple of years that JavaScript and the frameworks built around it have really matured into languages that neatly support basic animation. With several JavaScript frameworks available, jQuery is quickly becoming a favorite. If you are interested in using jQuery for animated effects, here are stunning examples of jQuery animations!
TN3 Gallery is a full fledged HTML based customizable jQuery photo gallery with slideshow, transitions and multiple album options. Compatible with all modern desktop and mobile browsers. Powered by jQuery.
Building an Animated Cartoon Robot with jQuery
jQuery Solar System
Impressive Animated Landscape Header with jQuery
Simulate Gravity With jQuery
Auto-Moving Parallax Background
Learn the best designing techniques with testkings online web designing course. Download the 70-680 tutorials and 70-642 demos to learn how to create jquery based web animations.
Web Designer, Blogger, M.Sc in Electronic Engineering from Nis, Serbia. Founder of webexpedition18.com. You can find me on Twitter.
17 Comments
ADD COMMENTferrisoxide says:
June 14, 2009Awesome effects. Thanks for putting all these up – quite inspiring.
Srinivas Tamada says:
June 14, 2009Great list…
Hezi says:
June 14, 2009this is ROCKNROLL!
Dimitris says:
June 14, 2009Sadly, all of them run extremely slow on this machine (Atom 330 dual core 1.6Ghz / Firefox 3) which means that it will long time before javascript even think replacing flash.
evgeny says:
June 15, 2009It’s so slooowww
Bobby Marko says:
June 16, 2009You guys must have some really crappy computers because they run just fine on my super old iBook.
Todd says:
June 16, 2009The gravity example is amazing!
Tim Aidlin says:
June 16, 2009Hi. I thought I’d share a couple more little web animations done with jQuery, using Glimmer from MIX Online:
http://visitmix.com/Lab/glimmer
http://thunderkick.us
Tyler says:
June 16, 2009Lol Bobby is right, I have quite an outdated mac and they runs perfectly fine for me.
colaja says:
June 16, 2009Tim thanks for mentioning Glimmer! It looks great
tknv says:
June 17, 2009oops! There doesn’t accept UTF8.
I said “IINJYANAI” in lang => “jp”.
Great samples and tutorials !!!
Thanks.
Evan Kroske says:
June 17, 2009These are somewhat impressive, but I’ve seen much better JS animations on http://www.chromeexperiments.com/. The starfield is pretty nice, but the gravity demo in particular is nothing special.
Jack says:
June 26, 2009Cool effects, I think I will use the parallax background scroller for one of my projects :-)
Rashid Rupani says:
January 28, 2010Great examples, Great Works
Christian says:
July 14, 2010Bubble Engine – Plugin for jQuery
The Bubble Engine makes soap bubbles on your websites. And without the need of Adobe Flash! Bubble Engine is a free plugin for jQuery.
Exciting combinations of bubble effects or whether reassuring stylish upgrade of isolated bubbles. With the free plug-in for jQuery, you can configure absolutely free, to look like your animation.
At the project site will tell you in detail how you can integrate and configure the plugin.
In the five demonstration sites you can see the effects Impressive Live, and even produce a demo with Live controller as many Bubble sources, move freely and configure.
Let rise a couple of times but like Bubbles!
PROJECT:
http://www.soyos.net/bubble-engine-plugin-for-jquery.html
DEMO:
http://www.soyos.net/tl_files/demos/bubbles/
Greetings,
Chris
Las Vegas Web Design says:
August 9, 2010Great plugins! Flash is obsolete, I think. Las Vegas Web Design
Thomas Hunter says:
September 5, 2010This is a cool jQuery animation, complete with all source code:
http://www.renownedmedia.com/blog/android-nexus-neural-network-live-wallpaper-in-jquery/