Parallax Scrolling without javascript

Yesterday I was wondering if it would be possible to create a parallax header, like the one used on Medium, using only CSS. I figured it should be possible using 3d transforms. Turns out Scott Kellum has already made a demo on CodePen using just that.

I wanted to see it work on something else than images of kittens, so I made this little demo.

Unfortunately this doesn't work well in Chrome on Retina screens (which is an issue that's being tracked) so use this with caution. Of course this won't work in older browsers, but you can pretty safely use it as an enhancement.


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Made by