/ best free open source web resources /

Graphic Resources

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

  • 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 :(

  • 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()

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

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

  • Hey thanks for the link Rey =)

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

  • 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


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

Supported By


Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons