Using parallax in web design isn’t new; you can easily find plugins, third-party libraries and no shortage of examples on the interwebz. I was searching for a pure CSS solution only to recall it had already been done with background-attachment and that I used this technique on a client project a few years ago! Silly forgetful me…

Perspective-taking

But CSS has advanced over the years and likewise the technique for parallax. The current trend uses 3D perspective which allows for multiple layers and lets the browser decide how much each layer moves. You can find many tutorials on how to do this but I like the one by Alvaro Trigo. After some playing around I realized this technique emphasizes “Parallax first, normal content second” — the parallax container takes over displaying all the page content and anything outside the container isn’t displayed (at least I couldn’t get it to display without double scrollbars). I can’t, for example, have a parallax section within my normal page content. You can, however, have non-parallax layers within the parallax container but they are constrained to the same dimensions as parallax layers requiring extra care to ensure content does not overflow when font-size increases. If you’re fine with those limitations and can understand the implementation of 3D perspective for parallax (which isn’t too difficult), go for it.

In which I shamefully return to Javascript

I really wanted to be able to insert a parallax section within my normal content flow and after thinking about it for a bit decided that a Javascript-based solution was the way to go. If anyone knows of a CSS-only solution for this, hit me up.

Here’s a video demo of what I came up with. A live demo exists here and you can also download the files. The images used in the demo were taken from Openclipart (credit to anarres).

Woo hoo! Parallax within normal content flow!

The demo might slightly break depending on the dimensions of your screen but I think it still clearly demonstrates the technique. The idea is simple enough: move each layer by a proportion of the vertical scroll position (layers closer to the user should move more).

Some closing thoughts

Although I had a high-level understanding of how parallax works in web design I’d never tried implementing it myself beyond the simple background-attachment method. It’s surprisingly not too difficult, at least at this level. I wrote the demo in under an hour and although I hard-coded a few things I can see how using data-* attributes could make things more customizable without adjusting the Javascript.