View the Live Site

The Design

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.

The Code

View the Live Site

The site was built using this implementation Keith Clark came up with. I’ve done a variety of parallax effects before using all kinds of javascript but this one is by far my favorite because it uses CSS only which is huge. Keith’s tutorial is great and the debug mode is especially cool. http://keithclark.co.uk/articles/pure-css-parallax-websites/

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.

  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; 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](http://www.twitter.com/davechenell)!

Final Result

View the Live Site

View on Dribbble

Update: April 16th

Check out the Codepen example using CSS only.

See the Pen Parallax Landscape CSS only by Dave Chenell (@dchen05) on CodePen.

http://codepen.io/dchen05/pen/Qweqdb