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