The design for this project was done by Eric Clecker, hes awesome and you should follow him. Below is the progression of the illustrations, from the blocking sketch to coloring and texturing.
I did uncover a few issues that hopefully can help other people trying to implement this effect.
CSS things to note
- Sometimes the page length would get wayy out of control. I was messing with this for a a while before I figured it out. You can fix this by setting all the parallax layers to position:fixed to make sure they aren't included in the overall scroll calculation.
- You might need and overlay layer for scrolling. I was facing a very strange issue only on my retina screen in chrome where the trackpad wouldn't scroll within the parallax tag but instead tried to scroll on the body.
I believe this has to do with the translateZ and can be fixed by adding transparent layers at the standard depth (translateZ(0)) with the css property pointer-events:none
Does it work on mobile?
Yes and no. Although technically it works because it is just CSS, since you are scrolling within the parallax tag, it does not have the smooth iOS momentum scrolling. This is kind of a deal breaker. The usual smooth scrolling fix of adding the below to the scrolling container, didn't work and completely botched everything.
I honestly didn't test this very much and wasn't able to test android either, so its possible it could be tweaked to work on mobile. If anyone investigates mobile compaibility more defintley let me know on twitter!
Update: April 16th
Check out the Codepen example using CSS only.
See the Pen Parallax Landscape CSS only by Dave Chenell (@dchen05) on CodePen.