Parallax: A Contemporary Trend in Web Design

October 1, 2013
admin

Contributor: Mehreen Chowdhury, Marketing Executive, Nascenia

Parallax, a cool new trend in web design, brought excitement among the people. Through this effect, when people view an object from different point, the object’s position or direction appears different. The technique of using CSS to make different layers on the web page move at different rates has been used in Parallax. So, when scrolling down the page, it feels like a visual page is turning with a new layer of beautiful imagery or video instead of having all the text, photos, videos, and other elements together.

Parallax - Contemporary Trend in Web Design

Parallax in web design: artist’s depiction

In web design parallax effect or parallax scrolling is a technique that is used to create a stimulating 3D illusion by creating layered images that move around at different speeds and effects such as ease in and ease out. Bigger layers appear closer because they move faster. The background moves slowly. CSS can be used to creatively make different sizes of layers and set up the windows to see layers through.

Apple has adapted parallax with its recent iOS 7. The effect creates a distinction between different layers. The background moves behind the static icons. It seems like icons are floating on the screen.

The use of the parallax effect is growing rapidly. Google Trend (see screenshot below) shows with the release of iOS7, search for the word ‘parallax’ jumped up recently.

The use of Parallax Effect is rising up day by day

The use of Parallax Effect is rising up day by day

Methods to Implement Parallax

Now let’s talk about a few methods those can be used for Parallax scrolling.

Layers

We can use multiple and foreground layers that can move in different directions and scroll at different speeds as well. These layers can be controlled automatically or are dependent on user interaction.

Repeated Pattern Manipulation

Here we set multiple tiles or screens to float over repeated backgrounds. To animate tiles quickly, we can use color cycling on the whole screen. This software effect gives the illusion of another layer.

Sprites

Programmers may also make pseudo-layers of sprites. It allows us to combine many images or bitmaps into pseudo-layers to create one image. It can make a flat image appear to be 3D.

Raster

Raster is where lines of pixels within an image are merged and refreshed in a top-to-bottom order. There’s a slight delay between drawing one line and the next line.

Great Websites with Parallax Implemented

Now I am going to show you some awesome examples of parallax scrolling which can inspire you too for making a website by using parallax scrolling. It provides the illusion of a three-dimensional effect, which adds a great subtle effect for visitors.

Have a look!

Following is a design based studio site which shows off their portfolio by using parallax effect.  Here, the background is moving slower than the foreground. The layers are going up on one another after scrolling down. It feels great like I am landing on the land by parachute 🙂

Boy Coy - a creative design based studio uses parallax scrolling for their portfolio

Boy Coy – a creative design based studio uses parallax scrolling for their portfolio

Here, a creative agency uses parallax effect for their portfolio and it makes a sense of depth like 3D animation.

Madwell - a Brooklyn based creative agency uses parallax effect for their portfolio

Madwell – a Brooklyn based creative agency uses parallax effect for their portfolio

This is another site below which uses parallax scrolling where I think, by scrolling down, it creates the feeling of discovering the beauties under the water! 🙂

iutopi – graphic design based agency uses parallax scrolling in their portfolio

iutopi – graphic design based agency uses parallax scrolling in their portfolio

On the following site, we can see the pages are coming up one by one after scrolling down.

Finger billiards uses parallax scrolling for making their portfolio

Finger billiards uses parallax scrolling for making their portfolio

The Downside of Parallax

Certainly, in the beginning, parallax sounds cool because it’s different. The sites with Parallax effect look awesome! People may find it more attractive than other simple websites but there are some problems too. Such as-

Slow to Load

Because of having heavy animation it can take pages longer to load and it will not function smoothly across all browsers. People do not have so many times in their hand so that they leave the page.

SEO

Parallax scrolling is not SEO-friendly. As we find the whole site on one page, we lose Meta information and the title bar after scrolling down. So, it is difficult to target the keyword in Meta tag like other typical websites. Here, the menu bar is lost after scrolling down.

As an example, see the following site uses parallax scrolling in their portfolio. When I scroll down, the menu bar is lost. So, sometimes it creates hassles for users.

Campaignmonitor - a site which used parallax scrolling

Campaignmonitor – a site which used parallax scrolling

Frustrate the User

Sometimes Parallax scrolling frustrates the user. How? The website should be easy to navigate but using the effect on a content-heavy site can require too much scrolling which can make reading difficult. So, people become frustrated to use.

Mobile Device

Parallax effects do not look same on a mobile device as it looks on a PC.

Parallax or not?

If we can overcome with the above problems, I must say Parallax Scrolling is a wonderful trend for web designing. However, overusing it or using it where the design or the usability don’t deserve it, can be vexing and causing your traffic away from your site.

6 Comments. Leave new

Ali Hasan Imam
October 2, 2013 3:14 pm

Official page of Android versions history is also a good example of Parallax Design. http://www.android.com/kitkat/

Reply

[…] The site below is organized beautifully using parallax scrolling. […]

Reply

http://boycoy.com/#home very good design, VERY BAD SEO, index only 2 sites and all SEO is social G+ & FB Like’s
Parallax is very cool for virus marketing 🙂

Reply

How does a snake try to eat an animal that’s more substantial than you’ll find it head?

Reply

Thanks for the sensible critique. Me & my neighbor were just preparing to do a little research about this. We got a grab a book from our area library but I think I learned more from this post. I’m very glad to see such fantastic info being shared freely out there.

Reply

Hello everyone, it’s my first pay a visit at this
web site, and piece of writing is genuinely fruitful in support of me, keep
up posting these types of articles or reviews.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.