Parallax Effect

Parallax Scrolling Effects in Web Design

Analysis & Showcase:

 

What is Parallax web design?

Parallax style in web design is a scrolling feature that enables elements of a web page to move at varying speeds when the user scrolls. The intention is to break up the linear monotony of a website and to create the illusion of depth. The effect is particularly observed when the background of a web page moves at a different speed from the rest of the components when you scroll. Parallax web style has been around for quite some time now. It is in recent years, however, that it has become an increasingly popular trend and has taken the web design world by storm. Parallax effects are made possible through JavaScript, but pure CSS can also be used to achieve the same effect. In fact, pure CSS parallax is consistently becoming the method of choice for incorporating the technique into web design.

 


is Parallax a new technique?

The term parallax comes originally from the Greek word parallaxis which means alteration. According to Wikipedia it is: “a displacement or difference in the apparent position of an object viewed along two different lines of sight”. Although parallax is relatively new in web design, it is not a new concept at all. This technique has been around for many years and the concept can be observed in different sections of science such as physics, astronomy and psychology. For centuries, it has been utilized by ocean navigators and astronomers in order to compute distances and directions. Even in entertainment branch, the parallax effect is an old technique. It can be traced back to classic media in 1940s when it was first used for animation. Back there, background images moved slower than foreground objects in order to create a sense of depth (a faux-3D effect) in an otherwise 2D game. Since 1980s, it has been utilized in video games.

 


how Parallax effects are created in web?

The parallax effect is attained by creating a perspective shift in the way an observer views an object. It is done through moving multiple backgrounds, hence having various objects scroll along different site lines at different speeds. In its true meaning, incorporation of parallax scrolling is not just a matter of adding cool effects to a website. From a functional point of view, there is more to it. It deals with usability of a website; it is basically utilized in order to create a visual curiosity which intrigues a user’s interaction. When you look at a screenshot image of a site having parallax effect, it can be interpreted as any other web style depending on the graphic layout applied. In this regard, it can be argued that parallax technique is not a stand-alone web style. However, it is considered  as such a one. Once you visit such a website and then interact through scrolling, a different world of design layout would be revealed. So in this respect, Parallax style is very unique.

 


what are pros & cons?

The degree of applying parallax technique varies. In some layouts it has been utilized more prominently while in others integrated subtly as a compliment to the overall design only. This design style is usually seen on one-page websites. Nowadays, there is much more creativity and variation in applying Parallax style. Nike, Inc. was one of the pioneers that utilized this technique on its website. When implemented properly, Parallax design style creates stunning visual effects. They are visually appealing web pages that users enjoy browsing.

The following is a list of its advantages:

  • On the whole, increases the visual appeal of website pages.
  • Catches visitors’ attention in a powerful way, hence extends visitor engagement on the site.
  • Effectively guides your visitors through the different parts of the site.
  • Improves user experience through enhanced visual interactivity.

Nevertheless, there are (like many things in web design) potential downsides to using Parallax design style.
The following points are considered as possible disadvantages:

  • When implemented on a single page website, the site’s SEO will be definitely suffered. You can only have one set of meta information and mainly one URL to use for SEO.
  • If not appropriately incorporated, parallax can cause issues for the website. Among other possible drawbacks, the site’s loading time will most probably be slowed.
  • It is difficult, and some times impossible, to utilize this technique in mobile design.

 

 

 

Sagmeister Walsh

w640-a

 

 

Putzengel

w497

 

 

Cdu

w647

 

 

Seedlip Drinks

w447

 

 

Dusko

w654

 

 

Sr Burns

w668

 

 

High Studios

w655

 

 

Fillet

w657-a

 

 

Lacca

w310

 

 

Reed

w651

 

 

Reform Collective

w652

 

 

Andy Rutledge

w637

 

 

QUQ Plus

w338-a

 

 

Bellroy

w344-a

 

 

Cast Iron Design

w86-a

 

 

Ala

w518-a

 

 

TN Vacation

w173-a

 

 

This By Them

w189

 

 

Hello Monday

w9-a

 

 

Rule of Three

w283-a

 

 

Spring/Summer

w345-a

 

 

Sir John A Day

w347-a

 

 

Folicurè

w288-a

 

 

Spacho

w250-a

 

 

Berger & Föhr

w249-a

 

 

Babel

w291-a

 

 

Bullet PR

w298-a

 

 

Media Link

w119-a

 

 

Blink Print

w638

 

 

Corvus Art

w33-a

 

 

OCD

w113-a

 

 

 

 


 

 


   :: Please Note

Each of our web design articles includes a showcase of those web sites which best represent the web design style under discussion. As we know, web sites are live documents and might be changed over a period of time in different regards. They may change their layout designs, contents, etc., or simply cease to exist (error codes: 404, 403, 401). We do our best to regularly update our materials regarding these eventual modifications.

However, it might happen that we could not keep up with these changes in time. So in case you are the first to notice these inconsistencies, please inform us. We really appreciate your feedback. You can easily contact us via our 'Contact Form' at the bottom of this page.



 

 

 

 

 

 

 

 


   :: link to us!

If you found some of these articles interesting and useful, please send them to a friend so they can benefit as well. You can easily send them via the email icon at the top of each article.

Furthermore, if you happen to have a site similar to ours, you can feel free to link to these editorials from your website.

Quick Contact