WebAppers

/ best free open source web resources /

Shopify

Building an Animated Cartoon Robot with jQuery

Posted · Category: Information, License Free

An Animated Cartoon Robot with jQuery was created by layering several empty divs over each other with transparent PNGs as background images.

The backgrounds were animated at different speeds using a jQuery plug-in by Alexander Farkas. This effect simulates a faux 3-D animated background dubbed the “parallax effect” originating from old-school side scrolling video games.

The robot is comprised similarly to the background animation scene by layering several DIVs together to create the different robot pieces. The final step, was animating the robot with some jQuery.

jQuery Robot

Requirements: -
Demo: http://robot.anthonycalzadilla.com/
License: License Free

13 Comments
  • neogrey

    Well, not looking good in IE6…

  • Pingback: TV and Flash animated cartoons about to be replaced by Javascript animation ? | Web And Say

  • james

    the animation is laggy :(

  • http://www.rdetub.com xentech

    I can’t believe someone on a web development blog is using IE6.

  • Pingback: Building an Animated Cartoon Robot with jQuery | Web Resources | WebAppers - Illuminations

  • http://kim.steinhaug.com/ Kim Steinhaug

    Looks very nice and it’s very smooth aswell! Great proof of concept, however not really usefull though from the “webapper” perspective.

  • http://visualcafe.net Serge

    This is a great concept! Works exceptionally smooth on FF3 on a Core 2 Duo with 1.5GB of RAM.

  • http://css-tricks.com Chris Coyier

    Hey thanks for the link Rey =)

    I think Anthony did an awesome job with that. Indistinguishable from Flash, really.

  • http://css-tricks.com Chris Coyier

    I mean “Ray”, sorry for the misspelling. I was all thinking about jQuery and “Rey Bango” is one of the guys on their team, must have gotten me confused for a second.

  • Ray Cheung

    @ Chris,

    Haha. No worries. I knew you have been mixed up Rey Bango with me. ;)

    I am a regular reader of CSS-Tricks. You have got so many useful CSS articles which help a lot of web developers and web designers like us! Please keep up the good work.

  • awake

    Incredible…

  • http://www.webgurus.ro Gergely Marton

    Awsome! This is the power of jQuery! nice post!

  • http://www.aktifotomatikkapi.com/index.php/bariyer-2 bariyer

    They did it with jquery, i cant believe my eyes. Wonderfull

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons