App Illustrations - Three Phases

I just finished a collection of app illustrations for an awesome company I've been working with over the past few weeks. These illustrations will be the backdrop for the app and change based on time of day.

View the fullsize image

Detail shots

View on Dribbble

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. 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!

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

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.

Assembly

View on Dribbble

Cloud Mallet

View on Dribbble

Particle Flow