Pros and Cons of Parallax design technique



The parallax technique allows the foreground and background content to scroll at different speeds, creating an illusion of depth. It can be used to a very good effect, but it’s debatable if it can be described as having good UX. In simple terms, it’s a technique that allows components of a web page to move at varying speeds when a user scrolls. In particular, the effect is created when the background of a web page moves at a different speed from the rest of the elements when one scrolls.

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.

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.

Pros of Parallax design

It allows one to effectively tell a story using mostly graphical elements. Thousands of websites are now using the parallax technique to create stunning visual effects. One can most likely see it on one-page websites, but the technique can be used on any type of site.

A low bounce rate with an Increase time spent on your website since most visitors will scroll through to the bottom of the page until the animations end, its another way to keep the visitors engaged in a powerful way.

Cons of parallax design

Bad for SEO: As sites that utilize parallax scrolling tend to be made up of one page, there’s usually little in the way of content that can be crawled by the search engines. This is especially true as text tends to be embedded in graphics.

Can reduce performance: Due to the heavy use of graphics and JavaScript, a page can get clogged up on load. And it’s certainly a headache for mobile users. Load times on mobile tends to be very poor when parallax is used, due to the heavy use of JavaScript.

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.

The methods typically involve combinations of HTML5, CSS3, graphics design, jQuery, and JavaScript to power the parallax scrolling effects.

No doubt this phenomenon creates an appealing visual effect and it’s no surprise that many web designs are now incorporating it.It increases the visual appeal of web pages and is especially effective when used to tell a story.Parallax has to be done well and it has to be a little different in order to capture and hold the attention of the user.

Share This:

Leave a Reply © 2015.