Apps

How the parallax effect is used in web design

Ryan Boudreaux defines the parallax effect and how it has been used in animation and gaming. It is also an effect that can be achieved in web design. Here are some examples.

Parallax is not some new drug or medication on the market; in fact, it's not new at all. It's been used by humans since the dawn of man, or enlightenment, whichever came first. The equation which defines the parallax effect in mathematical terms -- has been used for centuries by astronomers and ocean navigators to calculate distances and direction. Parallax scrolling has been used for animation since the 1940s and in video gaming since the 1980s. The use of parallax techniques for web design is a relatively new integration and is gaining popularity with many trendy websites and organizations. This post will present a history of the parallax effect and parallax scrolling, and then highlight several websites that utilize this feature.

Historical background and how the parallax effect works

The word parallax is derived from the Greek term parallaxis, which means alteration. The observable position of an object at any given distance is dependent on the viewpoint, or position of the viewer. Perspective shift occurs when a close object is observed from different viewpoints, and against a distant background.

To illustrate the effect of perspective shift, take the Washington Monument in DC for an example. If you are standing at the right side of the National World War II Memorial near 17th Street SW, and facing the Washington Monument, it appears to be just to the left of the United States Capitol building, we will call this "Viewpoint A", as illustrated with Google Earth in Figure A below.

Figure A

Now, let's walk on over to shift our viewpoint to the sidewalk just to the left side of the entrance to the National World War II Memorial on the 17th Street SW side as we continue to face the Washington Monument. Our viewpoint has changed, and so has our perspective, the view has been altered and now the Washington Memorial appears to be to the right of the United States Capitol building, (Figure B - Viewpoint B). This is the parallax effect. Objects in the foreground appear to move at different speeds and angles in relation to objects in the background view.

The parallax principle can be further explained with geometry and known variables starting with the parallax angle a which is the angle created between the two viewpoints A (Viewpoint A) and B (Viewpoint B) in relation to the object O (Washington Monument), and the baseline distance D between the two viewing points, then the distance R can be derived, as illustrated in the simple triangle displayed in Figure C.

Every human already uses the parallax effect every day, but you probably did not realize that, because it has already been an integral part of everyone who has two normally functioning eyes. Normal human vision uses parallax to estimate distances to objects and at lightening speed, so fast in fact, that you never recognize it until you test it out for yourself. To get a close-up example of the parallax effect in the comfort of your office or home, hold your arm out in front of you at eye level, and point your forefinger up, now alternatively blink each of your eyes. Did you notice how your forefinger at arms length appears to move relative to objects in the background? This is the parallax effect in action! And in this case, the baseline is the short distance between your two eyes. Your brain automatically measures the parallax angle, and gives you an intuitive guess for the distance of that nearby object, which in this case was your finger, in other words this is depth-perception at work.

Parallax has been used by astronomers to compute the distance of celestial bodies, and also for seafaring navigation to determine distances between objects where triangulation is used to determine current position, which is very similar to orienteering techniques as well.

Stellar parallax uses the simplified formula of finding distance of heavenly bodies by triangulation, where the equation d = 1/p; Distance [parsecs] = Baseline [AU] / Parallax Angle [Arc seconds], where 1 AU is the earths orbit, and 1 Arc second is 3.26 light years.

Early parallax scrolling

Parallax scrolling is the special technique used with graphics and animation to simulate motion with background images moving at a differing rate than the foreground images. Parallax scrolling was first utilized in the 1940s for cartoon animation using multiplane camera techniques. The parallax scrolling effect attained initial computer graphics adoption with 2D video gaming in the 1980s with the arcade game Moon Patrol, and was also known as one of the first games to utilize the side-scrolling effect.

Parallax methods

There are several methods that are utilized for scrolling.

  • Layers - Multiple background and foreground layers are defined which can move in horizontal or vertical directions, and scroll at various speeds, some are automatically controlled and others are dependent on user interaction, and can also be set in a composite.
  • Sprite - Combining many images or bitmaps in to pseudo-layers to create a single image, whereby a flat image can also appear to be three-dimensional, and where only one part of the image is displayed depending on the position.
  • Repeated pattern manipulation - Multiple tiles or screens appear to float over repeated backgrounds.
  • Raster - Lines of pixels within an image are typically composited and refreshed in a top-to-bottom order with a slight delay between drawing one line and the next line.

Parallax scrolling in web design

Many web sites have been featured in both tutorial examples and "Best of" lists highlighting those which utilize parallax scrolling. The methods typically involve combinations of HTML5, CSS3, graphics design, jQuery, and JavaScript to power the parallax scrolling effects.

The following ten examples illustrate various methods of employing parallax scrolling in web design, some scroll horizontal, some vertical, and some utilize a combination of methods.

Activate

With the Activate website, notice that as you scroll down the site, the text, background, and foreground images are scrolling at individual and different speeds. This is achieved through JavaScript and defining a data-speed attribute within the HTML for each layer of content, instructing those elements to scroll at different rates.

The Beatles Rockband

On The Beatles Rockband site, move your mouse around the top of the screen and notice that the clouds will scroll left or right depending on the cursor movement utilizing JavaScript and CSS.

Cultural Solutions UK

The Cultural Solutions UK site utilizes a combination of horizontal and vertical parallax scrolling effects with text and images in the foreground moving at a faster speed than several background images and content.

Fishy.com

Fishy.com.br based in Recife, Brazil uses parallax scrolling in its site to promote the products and services focused on web- and mobile- based communications for clients such as Kraft and Wal-Mart, for example.

Hero WordPress Theme

Hero is a responsive and minimal WordPress portfolio theme, and one of the key features is the parallax home page banner that allows you display your key message in an engaging fashion.

New Zealand

The New Zealand web site uses the full power of parallax scrolling throughout, and provides many ways to explore the country for travel ideas and locales.

Nike Better World

Nike Better World is recognized as one of the first websites to incorporate the parallax effect in web design, using HTML5, jQuery, JavaScript and JavaScript polyfills, and CSS3 within a PHP environment.

OK Studios

OK Studios located in Hamburg, Germany, uses effective parallax scrolling on its website promoting its projects, design, technology, lab, and other topics related to the business.

QMusic Titanic

The Dutch-based web site QMusic Titanic uses parallax scrolling in a very effective way, allowing the visitor to dive into a short history of the Titanic from below the water line and its ill fated disaster, to the eventual discovery on the floor of the Atlantic Ocean.

Soleil Noir

Soleil Noir Studio, based in Paris, uses parallax scrolling in their Believe In page highlighting eighteen sections of inspiration for believing in entertainment, fashion, iOS, health, flash, yourself, the future, and other topics.

Future articles will demonstrate incorporating the parallax effect into web design using a combination of background images, foreground images, sections, articles, jQuery, CSS3, and HTML5.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

7 comments
Basekey
Basekey

Are there any good tutorials available for parallax site development? I'd love to be able to accomplish something similar to these in WordPress.

tmbedzi
tmbedzi

It true, I would never vouched for Parallax, but with no other non-Flash media to turn to, we had to get a closer look at Parallax - and still make the web design 100% responsive. It seemed to be acahallenge in design skills but in the end we won the contest... see it on http://www.goldtree.co.za

DaveHaerian
DaveHaerian

Thanks for the article, Ryan. One of the big challenges is to get parallax worrking smoothly on touch devices like iPad. Having spent ages trawling the web for worthwhile examples of parallax like the ones you have showcased here, the development studio I work for came up with a hardware accelerated solution using HTML5. Checkout www.one-potato.co.uk on an iPad.

redmug
redmug

Hello, thanks alot for this article! It really gave me a good understand of parallax sites, I just wanted to know how to make you site scroll horizontally and vertically on the same site, Thanks

nancy.fusco
nancy.fusco

Really enjoyed this article. Never really thought about parallax in web design before. Interesting viewpoint. Pun intended. Thanks for good info Ryan!

RJBoudreaux
RJBoudreaux

So glad you liked the article! Soon I will feature a piece on creating your own web design with parallax effects using HTML, HTML5, CSS3, and jQuery.

Editor's Picks