CSS parallax effect for my About page

I just revamped my About page using a CSS-only method described in detail by Keith Clark here. Really happy how easy it was to use and extend!

The key is using the CSS perspective property in the wrapping div, where the children planes then appear to scroll at different speeds due to applied transform: translateZ(n) properties:

keith clark css parallax method

I’ve been wanting to play around with this for a while, without getting into Javascript methods, and from Keith’s post and the follow-up comments, it appears the modern browsers—especially Chrome, natch—do either a fast or acceptable job of rendering it performantly due to the browsers being able to use hardware acceleration.

Moiré pattern amplified by CSS3 animation

[Click here for the full effect. also hover over the bottom of the scrolling image for speed controls.]

The first time I saw this image, I was scrolling down the page, which is one of the most universal things that anyone anywhere does while browsing a site. I immediately “got” it. I decided to see what would happen with a little bit of CSS3 simple animation applied on a tiled background. And here we are.

SummerIsRad.comLink to the specific post where I got this image from.

Learn about Moiré patterns on Wikipedia

Moiré on Flickr