An article about this technique is available here: http://keithclark.co.uk/articles/pure-css-parallax-websites/
What kind of sorcery is this!?
Does this happen simply because of the transform?
Ahah, tricky !
Hey this is pretty cool!
Well, I really need explanations on this... Any blog post about it?
blog post +1
A blog post explaining the technique is coming. I'll post a link here when it's published
I don't get why using a ::before inside slide 1 and 3. The background work fine on theses too.
That's meta level.
Had to register just to comment that us commoners find this wizardry intimidating
Hurry up with the blog post :D Very curious :)
It almost works on mobile.
good job sir. kind regards.
Finally wrote this up in a blog post: http://blog.keithclark.co.uk/pure-css-parallax-websites/
+1 for getting the blog post out.
This is pretty impressive, will definitely be playing around with this for a future project.
This looks really pretty on desktops but the mobile experience is a bit lacking - intertial scrolling is lost altogether in Chrome and Safari on iOS and it basically doesn't work in Android at all - do you think the theory can be adapted to work on these platforms?
This is truly awesome, it really is! Just wondering, how would you go about to have a sticky header with this parallax technique? I've tried with the regular methods like making the header "position: fixed;" and "top: 0;" but can't get it to work. Anyone know's how i can make this possible?
There seems to be an issue with IE 11. Whenever the background layer is affected by parallax scrolling, such as the second slide here, IE displays the full size image instead of automatically resizing it to fit the screen, which ends up looking ugly. Does anybody know how to fix this?
This is awesome. Is it possible to modify this to make the content shift down the page rather than up?
Need to know how to enable it? Go here.