{"id":1014,"date":"2011-04-09T15:36:07","date_gmt":"2011-04-09T19:36:07","guid":{"rendered":"http:\/\/patorjk.com\/blog\/?p=1014"},"modified":"2014-01-25T17:49:12","modified_gmt":"2014-01-25T21:49:12","slug":"javascript-parallax-scrolling-experiment","status":"publish","type":"post","link":"https:\/\/patorjk.com\/blog\/2011\/04\/09\/javascript-parallax-scrolling-experiment\/","title":{"rendered":"JavaScript Parallax Scrolling Experiment"},"content":{"rendered":"

\"\"<\/a>
Parallax Clouds at patrickgillespie.com<\/figcaption><\/figure>There’s a neat CSS technique called “Horizontal Parallax Scrolling”, where background images will move at different horizontal speeds when the window is resized (example<\/a>). It’s done by positioning several divs on top of each other and having their background-position property set to different offsets. You can read a great CSS tutorial on it here<\/a>.<\/p>\n

I thought it was kind of cool and decided to see if I could come up with a way of doing “Vertical Parallax Scrolling”. There are a lot of ways one could approach this, but I decided to go with fixed positioned divs that would move when the user scrolled the page up and down. These divs would be attached to the background and a content div would sit on top of the background which would have a z-index higher than any of these fixed positioned divs. All content for the page would go inside of this content div. I figured this approach would suit me well since I was thinking of creating something where there’d be lots of floating objects in the background. <\/p>\n

After playing around a bit I came up with something that worked reasonably well in IE7+, Firefox and Safari, and ok-ish in Chrome. The effect was neat and 3D-ish, so I decided to use it at patrickgillespie.com<\/a>. It replaces the silly CD cover experiment I’d previously hosted there. The effect is still not as smooth as I’d like it, but I think for a really nice smoothness I’d probably have to use a canvas element instead of a bunch of divs. Anyway, if you’re interested, I’ve put together an example which you can download here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

There’s a neat CSS technique called “Horizontal Parallax Scrolling”, where background images will move at different horizontal speeds when the window is resized (example). It’s done by positioning several divs on top of each other and having their background-position property set to different offsets. You can read a great CSS tutorial on it here. I … Continue reading JavaScript Parallax Scrolling Experiment<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,34,32],"tags":[],"class_list":["post-1014","post","type-post","status-publish","format-standard","hentry","category-javascript","category-random-thoughts","category-web-development"],"_links":{"self":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/1014","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/comments?post=1014"}],"version-history":[{"count":13,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/1014\/revisions"}],"predecessor-version":[{"id":1667,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/1014\/revisions\/1667"}],"wp:attachment":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/media?parent=1014"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/categories?post=1014"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/tags?post=1014"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}