09 Dec
Posted by Ray Cheung as 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.
Requirements: -
Demo: http://robot.anthonycalzadilla.com/
License: License Free





Well, not looking good in IE6…
[...] I saw Anthony Calzadilla’s article “Building an Animated Cartoon Robot with jQuery” article through WebAppers. Just check the demo to see how nice this is! “This project was created by layering several empty [...]
the animation is laggy
I can’t believe someone on a web development blog is using IE6.
[...] Building an Animated Cartoon Robot with jQuery | Web Resources | WebAppers. Tags: cool, javascript, jquery [...]
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.
@ 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.
Incredible…
Awsome! This is the power of jQuery! nice post!
They did it with jquery, i cant believe my eyes. Wonderfull
RSS feed for comments on this post · TrackBack URI