Vitamin: Parallax-scrolling web-pages

Vitamin has posted a new tutorial on how to achieve a parallax scrolling effect in your web-pages. Check out the live example, Clearleft’s Silverback

…or read the rest of the article to find out a little more about parallax-style depth illusions.

CSS/XHTML trickery is something that fascinates me to no end, and this most recent technique is top of the heap, in my book! A very subtle, but elegant effect rendered with no javascript, just Cascading Style Sheets (CSS) and XHTML.

Parallax scrolling is a graphic technique of faking depth by motion cues – typically seen in side-scrolling games. Imagine that you’re looking at MegaMan, hopping around platforms. In the background is one layer that contains buildings that are fairly close to Megaman which move a little slower than MegaMan as he flits about the screen. Behind that layer is a slightly fuzzed out layer of more buildings which moves slower than the first, and behind that a layer with clouds that moves even slower across the screen as MegaMan is walking. This is parallax scrolling, multiple layers where the layers furthest back move the slowest in relation to the motion of the main image.

Vitamin has posted a great article showing how to do this with web-design. You have to see it in action to understand how it looks, so head to the prototype produced by ClearLeft Webdesign as the Silverback web template. To really appreciate the effect of the hanging vines at the top of the template try resizing the browser window and watch what the multiple levels of vines do relative to one another.

Unfortunately/fortunately this effect is not easily accomplished for the decrepit Internet Explorer 6 Browser, but a hack is provided to render a workable solution for that much-less-than-standards-compliant browser. Fortunately, Opera and Internet Explorer 7 should render this technique fine.

Here’s the links, again:

• Vitamin – creating a parallax effect in a web-page
• Parallax example: Silverback
• Wikipedia: Parallax Scrolling