In order to create a more compelling product, many companies are looking for ways to make their user interfaces more natural. Depth makes interfaces feel more realistic by mimicking the physics of their analog counterpart. Apple recently added this technique in iOS 7. When a user tilts their phone while looking at the home screen the app icons move relative to the background, creating the illusion that they are floating above the background.

Parallax is the phenomenon whereby objects appear to have different relative positions when observed from different view points. Consider the following diagram.

parallax diagram

When observing the scene from viewpoint 1 it appears that the atomic object logo is in front of the white box. And when the observer moves to viewpoint 2 it appears that the logo is now in front of the red box.

There are many consequences of parallax. I was first introduced to the concept of parallax in a physics class when discussing experimental validation. Parallax is a common source of error in measurement and alignment. For instance, when measuring the length of an object you must look straight at the ruler, otherwise the object may appear to be longer or shorter than it actually is.

Parallax affects nearby objects greater than distant objects. The relationship with distance is one component of depth perception. Therefore we can create the illusion of depth by moving objects which are closer to the observer faster than those further away.

We can achieve the parallax effect on web pages with CSS. As an example we will use three divs layered on top of each other, similar to a diorama. Each div will have a background image - corresponding to the layers in the scene.

Two key CSS properties are required for parallax: background-position and background-repeat.

background-position example

background-position defines the starting point for the background image. We want the starting position to be relative to the width of the container, thus we will use % as the unit for background-position. The value chosen corresponds to the distance from the left of the container as shown in the previous figure.

background-repeat example

background-repeat defines the direction in which the image will be tiled. Two options for this property are repeat-x and repeat-y. repeat-y tiles the image vertically, while repeat-x tiles horizontally. We will use repeat-x so that the image fills the entire container without stretching regardless of the width.

Demo

Imagine a new surf shack opening up at Anchor Bay. As part of their preparations for opening day this summer they have hired you to design their website. To inspire potential customers you have decided to add parallax waves in the header. When the window is resized the waves will shift. Below is the source code and example of the prototype. A modifiable version of this demo is available on JSFiddle

<!doctype html>
<html>
  <head>
    <style>
      body {
        background: #E4F7FE;
      }
      .wave {
        position: fixed;
        left: 0;
        width: 100%;
        height: 200px;
        background-repeat: repeat-x;
      }
      .back {
        background-image: url(data:image/png;base64,iVBORw0K...);
        background-position: 90%;
      }
      .middle {
        background-image: url(data:image/png;base64,iVBOR/wD...);
        background-position: 60%;
      }
      .front {
        background-image: url(data:image/png;base64,iVBORw0K...);
        background-position: 40%;
      }
    </style>
  </head>
  <body>
    <div class="wave back"></div>
    <div class="wave middle"></div>
    <div class="wave front"></div>
  </body>
</html>

Customization

Now that you understand the basic mechanics there are many ways to customize the parallax. You can use negative percentages to create a larger range of motion. Negative percentages can also be used to select the layer of the scene which is the focus.

Another customization aspect is the triggering mechanism. The example uses window resizing to drive the change. You can use scrolling as the trigger - use repeat-y instead of repeat-x. You can also use JavaScript to dynamically resize the container As the container is resizing the user will see the parallax.

While this example attempts to mimic the behavior of physical objects, the implementation is not bound by the laws of physics. Therefore the techniques demonstrated can be stretched for interesting visual effects. For inspiration take a look at the following links.

Whether designing a website or choosing a seat parallax is a valuable concept.