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.

This morning 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, and the prototype was 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

That's pretty awesome. Thanks for sharing.

I have been asked by a student at my school to make a website for her, so I may experiment with implementing this in the design.

BTW: love the new name-plate for the forums!  SYS approves! 

Awesome, thanks. 

Darned cool effect, but isn't it just that Rich ~ clever trickery. Not being a programmer maybe I have a naive view of the potential applications ( and if it's a game thing that can't be applied to Scrabble it's way over my head  ).
I'll certainly keep an eye on the updates though... never too late to learn summat!

Absolutely correct! 

What clever trickery it is, though!  I love web-design solutions and effects that rely on simple HTML/CSS, rather than complicated witch-craft like JavaScript (well, difficult for me, anyway).

there's a lot of neat and seemingly-complex visual tricks that can be pulled off using CSS styles alone, but this was one I had never seen before.