![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/parallaxdemo.png?resize=570%2C206\" "\\"\\"")
<\/p>\n<\/p>\n
A while back I did a little demo<\/a> on parallax backgrounds. As a quick review, parallax is that effect where there are different layers of backgrounds that all move at a different rate creating a very unique 3D effect (think Sonic the Hedgehog). In that original demo, the only way to see the parallax action take place was resize the browser window. <\/p>\n Recently, Paul Hayes took that example and ran with it<\/a>. He used the extremely cool -webkit-transition attributes to make the parallax effect move without needing to resize the browser window or use javascript. Paul did an awesome job and the demo works great, but of course because it uses the proprietary css extention, it only works in very modern WebKit based browsers (Safari 4 and Google Chrome).<\/p>\n While Paul’s example is ideally how this type of effect will be done in the future, I thought it might be cool to toss a little JavaScript in the original and get an auto-moving version out there that should work in all browsers*.<\/p>\n <\/p>\n View Demo<\/a> Download Files<\/a><\/p>\n <\/p>\n <\/p>\n Each “layer” is just an absolutely positioned div that covers the entire screen.<\/p>\n The background images are repeating and set with percentages. The percentages are what make the parallax effect work normally. But in this new JavaScript version, we’ll be overriding those and animating those values instead. This requires the use of the backgroundPosition plugin<\/a> for jQuery, as out-of-the-box jQuery can’t animate the backgroundPosition property. <\/p>\n Note before we fire off the animation we have to reset the backgroundPosition within the JavaScript. Weird… but it’s a requirement for the plugin to work properly.<\/p>\n Those big numbers in the animation function (e.g. 120000) stand for thousandths of a second. So 120000 = 120 seconds = 2 minutes. Changing those numbers you can extend or shorten the length of time of animation you get. It’s not infinite though… There may be a way to get that done, I just didn’t think it all through. Perhaps abstracting the animation out to a function that could be called and then called again during the callback (or something).<\/p>\n *The parallax thing is highly dependent on transparency. If you need it working in IE 6, check out the Unit PNG fix<\/a> or the DD_belatedPNG<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" A while back I did a little demo on parallax backgrounds. As a quick review, parallax is that effect where there are different layers of backgrounds that all move at a different rate creating a very unique 3D effect (think Sonic the Hedgehog). In that original demo, the only way to see the parallax action […]<\/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":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":610,"url":"https:\/\/css-tricks.com\/3d-parralax-background-effect\/","url_meta":{"origin":2508,"position":0},"title":"Starry Night: Incredible 3D Background Effect with Parallax","date":"March 12, 2008","format":false,"excerpt":"If you haven't seen the mysteriously cool Silverback app teaser page you should check it out. The Gorilla was designed by Jon Hicks (yep! the same site with the cool body-border technique). Make sure you resize your browser around when you visit the site to see the cool \"parallax\" effect\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6443,"url":"https:\/\/css-tricks.com\/parallax-background-css3\/","url_meta":{"origin":2508,"position":1},"title":"Parallax Background of Stars (plus CSS3 keyframe animation)","date":"May 25, 2010","format":false,"excerpt":"This idea was originally published on 3\/12\/2008, where you had to resize the browser window to see the parallax. I updated it on 4\/6\/2009 to utilize jQuery to move the stars automatically. I'm now updating it again to use CSS3 to animate the stars. There is some debate if these\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/css3starsmoving.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":367270,"url":"https:\/\/css-tricks.com\/scroll-shadows-pure-css-parallax-game-back-on\/","url_meta":{"origin":2508,"position":2},"title":"Scroll Shadows? Pure CSS Parallax? Game Back On.","date":"July 29, 2022","format":false,"excerpt":"Chris calls scroll shadows one his favorite CSS-Tricks of all time. Lea Verou popularized the pure CSS approach using four layered background gradients with some clever background-attachment magic. The result is a slick scrolling interaction that gives users a hint that additional content is available in a scrollable container. CodePen\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/smooth-scroll.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":21471,"url":"https:\/\/css-tricks.com\/3d-inset-parallax-effect\/","url_meta":{"origin":2508,"position":3},"title":"3D Inset Parallax Effect","date":"May 4, 2013","format":false,"excerpt":"The following is a guest post by Joshua Bader. Joshua noticed that certain 3D effects on the web could benefit from adjusting perspective as the web page is scrolled. I'll let him explain. People love to make flat things appear as if they're three-dimensional. There are two ways to pull\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21784,"url":"https:\/\/css-tricks.com\/3d-button-parallax\/","url_meta":{"origin":2508,"position":4},"title":"3D Button Parallax","date":"May 27, 2013","format":false,"excerpt":"The following is a guest post by Alexander Futekov. We recently published an article by Joshua Bader in which a 3D inset look was adjusted as the page scrolled to give it a more realistic interaction. This is similar only Alexander is using an extruded look on buttons and employing\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":275322,"url":"https:\/\/css-tricks.com\/using-css-clip-path-to-create-interactive-effects-part-ii\/","url_meta":{"origin":2508,"position":5},"title":"Using CSS Clip Path to Create Interactive Effects, Part II","date":"August 24, 2018","format":false,"excerpt":"This is a follow up to my previous post looking into clip paths. Last time around, we dug into the fundamentals of clipping and how to get started. We looked at some ideas to exemplify what we can do with clipping. We\u2019re going to take things a step further in\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/svg-clip-mask.gif?fit=800%2C400&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\/2508"}],"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=2508"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/2508\/revisions"}],"predecessor-version":[{"id":2526,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/2508\/revisions\/2526"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=2508"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=2508"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=2508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}How it Works<\/h3>\n
<div id=\"background\"><\/div>\r\n<div id=\"midground\"><\/div>\r\n<div id=\"foreground\"><\/div><\/code><\/pre>\n#background {\r\n\tbackground: url(..\/images\/background.png) repeat 5% 5%;\r\n\tposition: absolute;\r\n\ttop: 0; left: 0; right: 0; bottom: 0;\r\n\tz-index: 100;\r\n}\r\n\r\n#midground {\r\n\tbackground: url(..\/images\/midground.png) repeat 20% 20%;\r\n\tposition: absolute;\r\n\ttop: 0; left: 0; right: 0; bottom: 0;\r\n\tz-index: 200;\r\n}\r\n\r\n#foreground {\r\n\tbackground: url(..\/images\/foreground.png) repeat 90% 110%;\r\n\tposition: absolute;\r\n\ttop: 0; left: 0; right: 0; bottom: 0;\r\n\tz-index: 300;\r\n}<\/code><\/pre>\n<script src=\"js\/jquery-1.3.2.min.js\" type=\"text\/javascript\"><\/script>\r\n<script src=\"js\/jquery.backgroundPosition.js\" type=\"text\/javascript\"><\/script>\r\n<script type=\"text\/javascript\">\r\n\t$(function(){\r\n\t\r\n\t $('#midground').css({backgroundPosition: '0px 0px'});\r\n\t $('#foreground').css({backgroundPosition: '0px 0px'});\r\n\t $('#background').css({backgroundPosition: '0px 0px'});\r\n\t\r\n\t\t$('#midground').animate({\r\n\t\t\tbackgroundPosition:\"(-10000px -2000px)\"\r\n\t\t}, 240000, 'linear');\r\n\t\t\r\n\t\t$('#foreground').animate({\r\n\t\t\tbackgroundPosition:\"(-10000px -2000px)\"\r\n\t\t}, 120000, 'linear');\r\n\t\t\r\n\t\t$('#background').animate({\r\n\t\t\tbackgroundPosition:\"(-10000px -2000px)\"\r\n\t\t}, 480000, 'linear');\r\n\t\t\r\n\t});\r\n<\/script><\/code><\/pre>\nExtending the length of the animation<\/h3>\n