Open Source Resources for Web Application Developers

Shopify - Online Store Builder
Follow Us on Social Sites
Subscribe RSS Subscribe Newsletter Like us on Facebook Follow us on Twitter Follow us on Google+
  • Home
  • News
  • Plugins
  • Design
  • Others
  • Books
  • About
09 Dec

Building an Animated Cartoon Robot with jQuery

  • Information, License Free
  • Leave a Comment

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

Share
Tweet
Sponsors
subscribe to our newsletter - weekly free resouces for web developers
follow us on social sites - rss, facebook, google+, Twitter
Subscribe RSS Like us on Facebook Follow us on Twitter Follow us on Google+
Related Resources
How to Create Animated Shine Effect with jQuery & CSS3

How to Create Animated Shine Effect with jQuery & CSS3

How to Create a Beautiful Background Image Navigation

How to Create a Beautiful Background Image Navigation

Showing Big Background Video with BigVideo.js

Showing Big Background Video with BigVideo.js

Create Fancy Thumbnail Hover Effect with jQuery

Create Fancy Thumbnail Hover Effect with jQuery

jQuery for Menu Background Image Animations

jQuery for Menu Background Image Animations

How to Create a Animated Flip-Down Clock with Mootools

How to Create a Animated Flip-Down Clock with Mootools

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

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact

Sponsors
Advertise Here
Search
By Keywords
30 Days / All Time
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • Professional Business Cards Made By Designers
  • Best Free Chrome Extensions for Web Developers
  • All of the Best Free WordPress Themes You Need
  • How to Create a Web App Admin User Interface
  • Nice List of Open Source Fish Eye Menu
  • Best Web Admin Templates
  • 25 Useful Blogs for Web Design & Development
  • Simple Javascript Progress Bar with CSS
  • 10 Useful & Quality Design Resources
  • Free Web Application Icons
  • How to Create High-Performance Code
  • Easy to Use, Drag & Drop Bootstrap Interface Builder
  • Tiny Responsive jQuery Slider without Fancy Effects
  • How to Create Realtime Multi-player Games in HTML5
  • Create an Amazon-like Navigation Menu with jQuery
  • A True Responsive jQuery Lightbox Plugin for Free
  • How to Use Web Workers for Image Manipulation
  • Pretty Neat jQuery Mobile Theme Based on Flat UI
  • How to Make FullScreen Page Transitions with CSS
  • Super Smooth CSS Transitions for jQuery
Sponsors
Plugins
  • Advertisement15
  • Calendar47
  • Capture19
  • Charts55
  • Chat22
  • Demo Tour16
  • Gallery121
  • Maps30
  • Menu86
  • Polls9
  • Popup49
  • Tooltips42
  • Upload33
  • Video18
Desgin
  • Brushes11
  • Buttons25
  • Color Schemes24
  • Fonts47
  • Forms112
  • Icons108
  • Patterns24
  • PS Tutorials15
  • Stock Photos21
  • Tables25
Others
  • Announcement103
  • Best Collections6
  • Code54
  • eCommerce24
  • Framework215
  • Hosting13
  • Information239
  • Inspiration32
  • Legal Documents10
  • Reviews8
  • Security13
  • Social28
  • Sound16
  • Stats39
  • Tools293
  • Webmail14
Licesnes
  • BSD License67
  • CC License122
  • GPL License224
  • LGPL License40
  • License Free739
  • MIT License408
Sponsors
Advertise Here
Partners
NetDNA