Date

This won't be a long one. It's really just an excuse to show you some new background scenery.

(If you're reading the RSS, why not stop by the web site now to see what I'm talking about?)

Unfortunately it will probably be quite boring (disabled) on Firefox due to trouble with image upscaling, but if you are using Chrome or Safari (webkit browser), especially an iPad, it might be quite pretty.

So have a look round, read some of the older articles with a new perspective. Or go and explore the far right side of the blog.

In case you are curious, the parallax effect is mostly done with CSS 3d transforms and transitions applying perspective to a stack of semi-transparent PNG files, generated server-side using shaders.

The CSS3 feature -transform-style: preserve-3d; is the main trick to make the browser give depth to a scene as it pans around. With that applied to a parent item, and each image in the stack given a different Z depth from the screen using a translate, then the browser moves them at different rates.

Unfortunately it can't be applied to any scrolling item because on webkit, overflow:scroll is not compatible with the preserve-3d option. So the 3d scene is put into a parallel tree behind the articles and repositioned using javascript triggering a CSS transition. That's not ideal, especially on iOS where scroll events do not come in regularly after a flick. So the parallax can't track the panning rigidly.

Still, not a bad effect.

EDIT:22/11/2012. The parallax effect lasted a week before I changed to a new and slightly more conservative style for the blog.