Parallax Design


I wanted to find websites that use parallax as an element. On, there are 18 examples of the technique. However, it starts out by saying that designers should be aware of using too much parallax because it could end up looking messy and confusing to users. The definition of parallax is when the background moves at a slower rate than the foreground, creating a 3D effect as you scroll down the page. The idea is to create depth on the pages. A-Dam is a website that sells pairs of pants, and they use parallax to showcase their boxer briefs and shorts for men. They have a white foreground layer and then scattered images of their products that scroll over top of the page. Myriad sells office furniture, and uses parallax by arranging different photos of furniture over top a white foreground. Parallax can get crazy creative with sites like Firewatch, who uses six different layers to show a three-dimensional experience ( This Firewatch site showcases how unbelievable and innovative web design has become. Of course, however, the designers understand that the only part of their site that should be parallax is the top fold of the front page to get the user’s attention, and then the rest of the page is easy to read and doesn’t leave me seasick.

A site that CreativeBloq refers to for understanding how to do such a six layer parallax provides the coding that I can copy and paste onto my site (Codepen). I plan to bookmark this page and try it out myself!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s