Keep on Parallaxin’ on the New Web

Parallax: is it just another web trend or is there a deeper psychology  behind it?

Before we explain what Parallax is on the web and how it is used in the design of web apps and sites let’s go back, way back, to the origins of this science.

Parallax comes from the Greek parallaxis meaning “alteration”. Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines. Yes, very science-y I know – don’t worry we’ll get down to the basics soon enough.

Long before the adoption of Parallax in computer graphics, Astronomy has been using this science for years to measure the distance between stellar bodies. It is also used in instruments like binoculars, microscopes, cameras and the human eye.

Super Mario Brothers – 1985

Before the web, video game designers created a model called Parallax Scrolling or Mapping to construct independent layers that scrolled at different speeds and directions to simulate a parallaxed motion effect when a user interacted with the game.

This parallax motion effect allowed game designers to design more realistic moving elements like clouds, skylines, or passing objects. With parallax motion objects could appear further or closer away creating the illusion of depth.

Good examples of this would be any game built on Super Nintendo.

Today, most games are based on comprehensive three-dimensional graphics. Some portable game systems like the Nintendo DS still use parallax.

3D modelling is great for video games, but the bandwidth required to process these kinds of graphics can be excessive. As modern web design continues to evolve, the ability to add more realism and create unique environments for the user is absolutely essential. This is where parallax has found its new home.

In recent years, parallax scrolling has been adapted to web design. In fact, it has become a trend. With the aid of modern web standards like HTML5, CSS3, and Javascript, web designers and developers can create visually stunning and interactive web environments and creatives, like ourselves, can make any dream a reality for our clients and their clients.

Before I discuss the benefits of parallax on the web let’s take a look at how it works and what it is – since we’re not designing video games.

There are 2 examples of parallax in web design:

    1. Layered backgrounds that move at different speeds or in different directions as the user scrolls.
    2. Individual elements of a web site like icons, images, etc that move independently at different speeds or in different directions as the user scrolls.

Example 1 is the most common based on its simplicity to implement and the beautiful effect it creates.

parallax-diagram

How does it work – basically multiple backgrounds are layered on top of each other in code. When a user begins to scroll, they overlap and move at different speeds producing the illusion of depth.

Example 2, not as common due to it’s complicated nature to code, produces a similar effect, however it is far more engaging.

parallax-diagram2

How does it work – multiple elements of the site begin to move at different speeds as the user scrolls. The background usually moves at normal speed, basic scrolling of any site, while the parallax motion occurs with the layered objects. This effect is almost identical to the parallax motion effect discussed earlier by game designers to simulate realistic environments.

The benefits

It’s really cool!

The obvious benefits are purely visual. Although not everyone likes or needs parallax it does enhance the overall design creating really unique, fun, and engaging environments for the user.

We mentioned earlier the potential psychology behind parallax. Just like game designers used parallax motion to create more realism web designers employ parallax in the same fashion. Sub-consciously users are more engaged with a parallax design because of the sense or realism and the emotions it produces. Websites that are more “real” in terms of movement make us feel better about the design and more likely to spend time on the site and share it with others. Just as our human eye uses parallax the browser becomes our third eye to the internet taking us to places we never imagined could exist – yes I’m getting a bit esoteric, but its true.

As the web continues to evolve we can only imagine with devices like Google glasses that one day we will be building sites with real depth, 3D modelling, and even the potential to take advantage of senses beyond sight and hearing.

I hope this has helped you better understand what parallax is, some of the benefits of using it, and what this means to the future of the web.

If you know a really cool parallax site we’d love to see!

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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