Parallax-y background effect

I’m not sure if parallax is the right term for this effect, but I really love this simple tutorial from Codyhouse. (You definitely should check em’ out!).

So what is it? Well, as per Codyhouse:

Alternate Fixed & Scroll Backgrounds

How to create alternate fixed and scroll backgrounds with no javascript, but just the help of the CSS background-attachment property set on Fixed.

If you’ve been surfing a lot in the recent months (or years), there’s this some kind of “reveal” effect when you scroll thru a page. Here’s the demo to understand it more.

Pretty simple, huh? 🙂  Here’s how I did it. BONUS: Do also checkout the code for vertically centering a dynamic content block with the use of a pseudo ghost element. (Nope, no tables).

However, do note that this parallax technique might not work well when viewed using your phone or tablet. If you’d like to have a more advanced and bullet-proof parallax effect, you might want to see Skrollr.js.

Other examples: