Home » What is a Parallax Page and Do You Need One?

What is a Parallax Page and Do You Need One?

If you follow web design long enough, you will see that certain techniques and styles fall in and out of popularity every year.  One of the more popular trends in recent years, is something called the parallax page, or parallax scrolling.  How long will this trend last?  It’s hard to say, but regardless, you should learn about this concept, and understand if it’s worth implementing on your business website.

The Concept behind a Parallax Page

“Parallax Scrolling” is an animation technique to give visual depth to a 2D-animation. It is done by moving the images that are supposed to be closer to the viewer (the camera) at a faster rate than the images further off into the distance; this needs at a minimum of two layers but can have as many layers as desired. This creates the illusion of depth (3D) because of how eyes perceive the movement of the objects.

What is a Parallax Page?

This Parallax Scrolling technique has been applied to webpages such that as a user scrolls the background and image layers move with parallax to create story-telling, stylized navigation, impressive animations, and so forth. For example a site may have computer parts come together and come apart accompanied by information as the user scroll. However, not all results are created equal.  Here is a basic gif animation of a parallax page to give you a basic understanding, and no doubt you will realize you’ve already seen these types of pages on the web somewhere.

Is it Necessary?

A number of pros and cons need to be weighed and understood before deciding whether it is worth the time and investment.

Pros

  1. Due to its interactive nature the page increases the time the site visitors spend on the page.
  2. The page can have very impressive elements that can draw and engage the visitor’s attention.
  3. If done well, the page can increase the navigability and interactivity of the site improving user engagement.
  4. The page can have Call-to-Actions (CTA) built into the scrolling to get better results from visitors.
  5. It can help guide the user through a story or a series of useful information (texts, images, etc.).

Cons

  1. Site load times increase which can lead to unhappy visitors affecting current and future visits.
  2. Parallax pages are not SEO-friendly. This is due to being primarily a single page, generally lacking internal links, a single URL and header. Various people are working to find workarounds using things like jQuery. However, that is not perfect so this is considered a drawback. Moz has a collection of possible solutions to SEO issues.
  3. Parallax pages do not support responsive web design. This means the webpage does not automatically adapt to all types of screen types and devices visually or in terms of navigation and usability.
  4. Cross-browser compatibility is another issue that would need to be addressed adding to development and support costs of the site.

When is Parallax Scrolling Best Used?

An example of a good use of Parallax Pages is the Nintendo Mario kart history page:

http://www.nintendo.com.au/gamesites/mariokartwii/#home

Note that this page not only is a story information board with catchy visuals and videos, it also minimizes the scrolling. A single stroke takes the visitor to the next stop. There are shortcut links for those that do not wish to scroll. There is a scroll bar as a click and drag option. Finally, there is a button to return the visitor back to the main site. This doesn’t compromise the SEO, provides information, gives the necessary “pop” for the site, and is a valuable addition.

There is often the temptation due to the impressive visuals for Parallax Pages to be the main page of a site. However, a more useful approach of it would be as a secondary page. This could be a page that navigates the visitor through the history of the company or perhaps an alternate overview of product or services offered and their benefits.

It's only fair to share...Share on FacebookTweet about this on TwitterPin on PinterestShare on Google+Share on Tumblr