{"id":1660,"date":"2008-12-03T05:45:29","date_gmt":"2008-12-03T12:45:29","guid":{"rendered":"http:\/\/css-tricks.com\/?p=1660"},"modified":"2015-05-05T18:46:02","modified_gmt":"2015-05-06T01:46:02","slug":"jquery-robot","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/jquery-robot\/","title":{"rendered":"Building an Animated Cartoon Robot with jQuery"},"content":{"rendered":"

Why?<\/h3>\n

Aside from being a fun exercise, what purpose does something like this have? None that’s plainly obvious. Its about as useful as a miniature ship in a bottle. Yet it does have an underlying purpose. It could inspire someone to look beyond the perceived constraints of web designers and developers. <\/p>\n

View Demo<\/a><\/p>\n

 <\/p>\n

Overview<\/h3>\n

This project was created by layering several empty divs over each other with transparent PNGs as background images. <\/p>\n

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 \u201cparallax effect\u201d originating from old-school side scrolling video games. <\/p>\n

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. <\/p>\n

\"\"<\/p>\n

<\/p>\n

The Markup<\/h3>\n
<div id=\"wrapper\">\r\n\t\r\n  <div id=\"cloud-01\">\r\n  <div id=\"cloud-02\">\r\n  <div id=\"mountains-03\">\t\r\n  <div id=\"ground\">\r\n\t\r\n  <div id=\"full-robot\">\r\n    <div id=\"branding\"><h1>Robot Head.<\/h1><\/div> \r\n    <div id=\"content\"><p> Robot Chest.<\/p><\/div> \r\n    <div id=\"sec-content\"><p> Robot Pelvis.<\/p><\/div> \r\n    <div id=\"footer\"><p> Robot Legs.<\/p><\/div>\r\n  <\/div>\r\n\r\n  <\/div>\r\n  <\/div>\r\n  <\/div>\r\n  <\/div>\r\n\r\n<\/div><\/code><\/pre>\n
The structure of the divs closely resembles our diagram. None of the DIVs has the width attribute specified so they will expand to fill the size of any browser window they are displayed on. NOTE:<\/strong> All the images that make the background scenery parallax effect are 9999px wide. Well beyond the width of any computer display or television in common use. We\u2019ll use CSS to place the background images exactly where we want within each particular div.<\/p>\n
The Style<\/h3>\n
The CSS for this project is just as simple as the markup.<\/p>\n
h1, p { position: absolute; left: -9999px; }\r\n\r\ndiv {position: relative;}\r\n\r\n#wrapper { background: #bedfe4 url(..\/images\/sun.png) no-repeat left -30px; border: 5px solid #402309;}\r\n\r\n#cloud-01 { background: url(..\/images\/clouds-01.png) no-repeat left -100px; }                                                         \r\n                                                          \r\n#cloud-02 {\tbackground: url(..\/images\/clouds-02.png) no-repeat left top; }\r\n\r\n#mountains-03 { background: url(..\/images\/mountain-03.png) no-repeat left bottom; }\r\n\r\n#ground { background: url(..\/images\/ground-05.png) no-repeat left bottom; }\r\n\r\n#full-robot { width: 271px; }\r\n\r\n#branding { \r\n\tbackground: url(..\/images\/robot-head.png) no-repeat center top;\r\n\twidth: 271px;\r\n\theight: 253px;\r\n\tz-index: 4; \r\n\t}\r\n\r\n#content {\r\n\tbackground: url(..\/images\/robot-torso.png) no-repeat center top;\r\n\twidth: 271px;\r\n\theight: 164px;\r\n\tz-index: 3;\r\n\tmargin-top: -65px;\r\n\t}\r\n\r\n#sec-content {\r\n\tbackground: url(..\/images\/robot-hips.png) no-repeat center top;\r\n\twidth: 271px;\r\n\theight: 124px;\r\n\tz-index: 2;\r\n\tmargin-top: -90px;\r\n\t}\r\n\r\n#footer {\r\n\tbackground: url('..\/images\/robot-legs.png') no-repeat center top;\r\n\twidth: 271px;\r\n\theight: 244px;\r\n\tz-index: 1;\r\n\tmargin-top: -90px;\r\n\t}<\/code><\/pre>\n
Absolute positioning is used to pull any header or paragraph text 9999px to the left of the screen. Then we declare every DIV in the page position: relative. By making all the DIVs position: relative;, we now have the ability to the use the z-index property to reverse the natural stacking order of the robot DIVs.<\/p>\n
The jQuery JavaScript<\/h3>\n
Disclaimer: The original script to animate the robot was horrid. The good folks at coding cyborg<\/a> were kind enough to clean it up and re-write it.<\/p>\n
$(document).ready(function(){ \r\n$('#cloud-01').css({backgroundPosition: '0 -80px'});\r\n$('#cloud-02').css({backgroundPosition: '0 -30px'});\r\n$('#mountains-03').css({backgroundPosition: '0 50px'});\r\n$('#trees-04').css({backgroundPosition: '0 50px'});\r\n$('#ground').css({backgroundPosition: 'left bottom'});\r\n$('#branding').css({backgroundPosition: 'center 0'});\r\n$('#content').css({backgroundPosition: 'center 0'});\r\n$('#sec-content').css({backgroundPosition: 'center 0'});\r\n$('#footer').css({backgroundPosition: 'center 0'});\r\n$('#wrapper').css({overflow: \"hidden\"});\r\n\r\n\t$('#klicker').click(function(){\r\n\t\t$('#cloud-01').animate({backgroundPosition: '(-500px -80px)'}, 20000);\r\n\t\t$('#cloud-02').animate({backgroundPosition: '(-625px -30px)'}, 20000);\r\n\t\t$('#mountains-03').animate({backgroundPosition: '(-2500px 50px)'}, 20000);\r\n\t\t$('#ground').animate({backgroundPosition: '(-5000px bottom)'}, 20000);\r\n\t\r\n\tstartHim();\r\n\t\r\n\t$(\"#full-robot\").animate({left:\"50%\",marginLeft:\"-150px\"}, 2000);\r\n\tsetTimeout(\"leaveScreen()\",15000);\r\n\t});\r\n\t\t\r\n});\r\n\r\nvar num = 1;\r\n\r\nfunction startHim(){\r\n\tnum++;\r\n\t$(\"#sec-content\").animate({top:\"-=5px\"},150).animate({top:\"+=5px\"},150);\r\n\t$(\"#content,#branding\").animate({top:\"-=\"+num+\"px\"},150).animate({top:\"+=\"+num+\"px\"},150);\r\n\tif(num<4){\r\n\t\tsetTimeout(\"startHim()\",300);\r\n\t} else {\r\n\t\tsetTimeout(\"bounceHim()\",300);\r\n\t}\r\n}\r\n\t\r\nfunction bounceHim(){\r\n\t$(\"#sec-content,#branding\").animate({top:\"-=4px\"},150).animate({top:\"+=4px\"},150);\r\n\t\t$(\"#content\").animate({top:\"-=8px\"},150).animate({top:\"+=8px\"},150);\r\n\tsetTimeout(\"bounceHim()\",300);\r\n}\r\n\t\r\nfunction leaveScreen(){\r\n\t$(\"#full-robot\").animate({left:\"100%\",marginLeft:\"0px\"}, 2000);\r\n}<\/code><\/pre>\n
We begin by re-affirming the original background position of all the images. <\/p>\n
Upon clicking the \u2018#klicker\u2019<\/strong> div, a function tells jQuery to animate the backgrounds from their current position all the way to the coordinates specified for each div. By separating all the different image layers into different DIVs we can animate the background elements at different speeds. Moving the elements at different speeds gives an illusion of a 3rd dimension. We move the elements in the background at a much slower rate than the elements in the foreground. Notice on this animation that the speed of the clouds in the background is slower than the speed of the mountains. And the mountains are slower than the ground which is the fastest of all. Finally after firing off all these commands to get the background moving the \u2018#klicker\u2019<\/strong> function calls on the \u2018startHim()\u2019<\/strong> function.<\/p>\n
The \u2018startHim()\u2019<\/strong> function, you guessed it right, starts our robot. It begins his little bounce and gets him moving to the center of the #wrapper div. The \u2018startHim()\u2019<\/strong> function calls on the \u2018bounceHim()\u2019<\/strong> function. And then it keeps looping.<\/p>\n
We need to make the robot seem like it was bouncing on a rough desert rode. To achieve that bouncy irregular effect we\u2019ll use the \u2018bounceHim()\u2019<\/strong> function. It targets the separate robot DIVs and \u2018bounces\u2019 them 5px up and then 5px down. That wont be enough though, all the different pieces of the robot bouncing at the same rate looks too stiff. We need to make it look a bit more random and interesting. So we\u2019ll take the div that makes the chest portion of the robot and move it at a different rate than the head and pelvis pieces. We\u2019ll \u2018bounce\u2019 the chest part at 8px up and 8px down. This gives the robot a nice off-beat bouncy effect.<\/p>\n
The \u2018leaveScreen()\u2019<\/strong> function is the last function called. After 15 seconds (15000) it moves the robot 100% percent to the left of the screen which consequently moves the robot off to the right of the screen.<\/p>\n
Anthony Calzadilla<\/a> is an independent web designer based out of Miami, FL. USA.<\/em><\/p>\n
Note from Chris<\/h3>\n
I think this is an extremely cool experiment. I’d say for most users, the end result is indistinguishable from Flash. Yet, the advantages over Flash are enormous. Each piece of the animation is separate and can be altered\/replaced easily. Tweaks to the animation style can be done with numbers within the JavaScript file itself as opposed to having to alter an original Flash document and re-export\/upload an entire new version.<\/p>\n","protected":false},"excerpt":{"rendered":"
Why? Aside from being a fun exercise, what purpose does something like this have? None that’s plainly obvious. Its about as useful as a miniature ship in a bottle. Yet it does have an underlying purpose. It could inspire someone to look beyond the perceived constraints of web designers and developers. View Demo   Overview […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[265],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":168883,"url":"https:\/\/css-tricks.com\/improving-ui-animation-workflow-velocity-js\/","url_meta":{"origin":1660,"position":0},"title":"Improving UI Animation Workflow with Velocity.js","date":"April 30, 2014","format":false,"excerpt":"The following is a guest post by Julian Shapiro. Julian recently released Velocity.js, a more performant jQuery replacement for .animate(). He recently wrote about how JavaScript animations can be so fast over on David Walsh's blog, a topic we've covered here as well. In this article, Julian introduces Velocity.js itself.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":334463,"url":"https:\/\/css-tricks.com\/taming-blend-modes-difference-and-exclusion\/","url_meta":{"origin":1660,"position":1},"title":"Taming Blend Modes: `difference` and `exclusion`","date":"March 22, 2021","format":false,"excerpt":"Up until 2020, blend modes were a feature I hadn't used much because I rarely ever had any idea what result they could produce without giving them a try first. And taking the \"try it and see what happens\" approach seemed to always leave me horrified by the visual vomit\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-03-09-at-2.13.19-PM.png?fit=1200%2C469&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":342448,"url":"https:\/\/css-tricks.com\/how-to-create-css-charts-with-interesting-shapes-glyphs-and-emoji\/","url_meta":{"origin":1660,"position":2},"title":"How to Create CSS Charts With Interesting Shapes, Glyphs and Emoji","date":"June 21, 2021","format":false,"excerpt":"Let\u2019s forego the usual circles and bars we typically see used in charts for more eccentric shapes. With online presentations more and more common today, a quick way to spruce up your web slides and make them stand out is to give the charts a shapely makeover \ud83e\ude84 I\u2019ll show\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/chart-shapes.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":7079,"url":"https:\/\/css-tricks.com\/slide-to-unlock\/","url_meta":{"origin":1660,"position":3},"title":"iPhone “slide to unlock” Text in WebKit\/CSS3","date":"August 13, 2010","format":false,"excerpt":"There are a couple of WebKit specific properties that make giving text a gradient background possible: -webkit-background-clip: text; -webkit-text-fill-color: transparent; Those will allow the background of the parent element to become the background of the text inside. I gots to thinkin', if we made a made a horizontal gradient that\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2010\/08\/animatedbackground.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":322469,"url":"https:\/\/css-tricks.com\/how-to-recreate-the-ripple-effect-of-material-design-buttons\/","url_meta":{"origin":1660,"position":4},"title":"How to Recreate the Ripple Effect of Material Design Buttons","date":"October 12, 2020","format":false,"excerpt":"When I first discovered Material Design, I was particularly inspired by its button component. It uses a ripple effect to give users feedback in a simple, elegant way. How does this effect work? Material Design's buttons don't just sport a neat ripple animation, but the animation also changes position depending\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/unsplash-alihartmann-ripples.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":374376,"url":"https:\/\/css-tricks.com\/how-to-make-a-folder-slit-effect-with-css\/","url_meta":{"origin":1660,"position":5},"title":"How to Make\u00a0a Folder\u00a0\u201cSlit\u201d\u00a0Effect\u00a0With CSS","date":"October 19, 2022","format":false,"excerpt":"When you put something \u2014 say a regular sheet of paper \u2014 in a manilla folder, a part of that thing might peek out of the folder a little bit. The same sort of thing with a wallet and credit cards. The cards poke out just a smidge so you\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/04CF2531-2BFD-4A22-B275-5FC6440DA52D.jpeg?fit=1200%2C691&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/1660"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=1660"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/1660\/revisions"}],"predecessor-version":[{"id":201717,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/1660\/revisions\/201717"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=1660"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=1660"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=1660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}