Parallax Scrolling

Since I’m looking to move my domain to the site I’ll be taking my current site down. Usually I “grow out” of a site as my tastes change, but I’m at the odd juncture where I actually like both sites at the moment. However, one must go 🙂

So before I take the old one down, let me have one last look -

Parallax Scrolling, the premium pseudo-3d method of the early 90s. Both Sega and Nintendo made much use of this technique (as seen in this youtube sonic the hedgehog video)

So I started with a little foreground image (the hills), a background image (the sky) and my text in the middle. Some absolute positioning takes care of ensuring everything falls in it’s place, with some overflow hidden to allow us to draw out side the edges.

Then it’s up to the standard jQuery horizontal scrollbar to scroll all three layers relative to the scrollbar value, with differing scales of scrolling for each layer.

And so my retro-mario site was born. I’ve made a little screencast for posterity.


Mark Baillie says:
A couple of self notes. (1) Posterous will accept divx video and convert it (2). Posterous will not accept MKV or DIVX extensions, only AVI