Back to the top

Stunning jQuery animations

post_teaser
PUBLISHED ON

June 13th, 2009

TAGS

DISCUSS

16 Comments

Only 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!

Building an Animated Cartoon Robot with jQuery

robot

jQuery Solar System

solar-system

Impressive Animated Landscape Header with jQuery

landscape-header

Simulate Gravity With jQuery

gravity

Auto-Moving Parallax Background

starry-night

Tell Us What You Think

Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

Enjoy This Post?

About Nikola Lazarevic

Web Designer, Blogger, M.Sc in Electronic Engineering from Nis, Serbia. Founder of webexpedition18.com. You can find me on Twitter.

16 Comments So Far

  • Awesome effects. Thanks for putting all these up – quite inspiring.

    ferrisoxide
  • Great list…

    Srinivas Tamada
  • this is ROCKNROLL!

    Hezi
  • Sadly, 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.

    Dimitris
  • It’s so slooowww

    evgeny
  • You guys must have some really crappy computers because they run just fine on my super old iBook.

    Bobby Marko
  • The gravity example is amazing!

    Todd
  • Hi. 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

    Tim Aidlin
  • Lol Bobby is right, I have quite an outdated mac and they runs perfectly fine for me.

    Tyler
  • Tim thanks for mentioning Glimmer! It looks great

    colaja
  • oops! There doesn’t accept UTF8.
    I said “IINJYANAI” in lang => “jp”.
    Great samples and tutorials !!!
    Thanks.

    tknv
  • These 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.

    Evan Kroske
  • Cool effects, I think I will use the parallax background scroller for one of my projects :-)

    Jack
  • Great examples, Great Works

    Rashid Rupani
  • Bubble 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

    Christian
  • Great plugins! Flash is obsolete, I think. Las Vegas Web Design

    Las Vegas Web Design

Leave Your Comment