Parallax: A Contemporary Trend in Web Design
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.
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.
Methods to Implement Parallax
Now let’s talk about a few methods those can be used for Parallax scrolling.
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.
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 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 🙂
Here, a creative agency uses parallax effect for their portfolio and it makes a sense of depth like 3D animation.
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! 🙂
On the following site, we can see the pages are coming up one by one after scrolling down.
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.
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.
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.
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.