Landscape parallax using CSS

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.

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!

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.

This past year

View full res

This blog is one year old

Last year around this time I decided I was going to "get better at the internet". My former startup had officially just failed and I moved from a friends couch to a real apartment to began freelancing full time. I started this blog and began sharing the various design/animation/programming projects I get myself into without any real theme or goal in mind.

The outcome has been really incredible. I'm thankful for all 34k of you humans (or robots?) that checked out my blog this year and the opportunities that have come from that. Living and working in NYC has been amazing and this year I was fortunate enough to travel to London and San Francisco to work on really cool projects with awesome people. I'm stoked for 2105 and really appreciative for all my friends, family, clients, and mentors who helped in even the smallest of ways. You guys rock and I owe you everything.

Top posts from this year

Side note: Celebrating new years in the winter is depressing. Celebrating the new year with a season change seems way better, thats happening, come on romans.

Follows - > Twitter, Dribbble.


View on Dribbble

Cloud Mallet

View on Dribbble

Particle Flow

Angular UI Read/Write

Recently I've been working on a CMS platform in AngularJS.

Typically CMS's have a lot of forms. Forms are ugly.

The design decision was to limit the amount of screens and forms needed by combining the Read/Edit screen into one with a simple toggle that gracefully transitions between the two states.

Here is a high level overview on how it works

  • A custom directive is used to extend ng-model to work on non input elements (div/p/li) etc. This means the model is live updated as you edit, and totally safe when you are not editing. This means the same template could be use for frontend/admin.

  • When in "edit" mode, the HTML5 contenteditable attribute is used for text input and the appropriate css classes are added for editing.

  • For dropdowns, I forked and simplified a version of angular-dropdown, which is used for dynamic populating/updating the select items.

  • Everything is tied together with CSS transitions using ng-class. The DB calls are made using angular $http.

More to come soon!

View on Dribbble