The latest trend in web design: parallax scrolling

3 min reading
Developers / 04 February 2014
The latest trend in web design: parallax scrolling

BBVA API Market

Used in moderation, parallax web design can provide a nice touch, more modern and professional, to a site. But what's behind this technique?

The so-called parallax scrolling is the latest phenomenon in web design, adding movement and generating an illusion of depth as it displays two or more objects simultaneously at different speeds in a 2D plane. Although we are now seeing a huge boom in this type of web content presentation, video game designers and other artists have been using it for many years.

Firstly, there are several things to keep in mind before you start to apply it:

Required technology

The development of a parallax website encompasses technologies such as HTML5, JavaScript and CSS. But don't panic if you're not an experienced developer: there are some libraries which will make your work easier. Some of the most popular are parallax.jsskrollr.js and jarallax.js.

To begin with, we've found a small clear and simple tutorial which will help you to start programming. But, first of all, remember you will be able to create the 'containers' and the body of the page with HTML. With CSS you can decorate the web's paragraphs and texts, providing them with styles and colour, which are then converted into floating elements. Once the CSS is completed you can apply the animations with the help of JavaScript libraries such as jarallax.js.

Note that this type of web design is based on elements that move in and out of the screen, so if you want your site to be more efficient a trick to take into account is establishing an order in the code that detects when a container is located outside the window, so it stops calculating and adjusting its position. This will prevent any unnecessary calculations when the elements are off the screen, thus improving performance.

Parallax in mobile platforms

Today, developing a website not only takes into account the way it displays and performs on computers, but also on mobile devices, and in the latter parallax is usually slow and doesn't look so good. So how is it possible to make our designs ‘friendly’ in both worlds?

A good solution is Jetpack. This tutorial shows how with this plugin, which features a mobile devices detection system, it is possible to adapt a parallax scrolling design to a smartphone or a tablet. For this it is necessary to disable the parallax JavaScript and load in an extra CSS file when a mobile phone or tablet is detected. In that style sheet it is possible to load smaller compiled versions of background images, and use media queries to adjust them to different sizes.

Some of the best examples

The parallax scrolling technique can cover everything, from the simplest designs, like Flickr, up to some really complex projects such as the site created by Peugeot to promote its hybrid vehicles. The key is to find a way to incorporate all the elements you want with a unique approach and without harming, as mentioned before, the performance, the usability and the user's experience.

– Open-Buzz

If the goal is to communicate different types of information, the parallax design allows you to create a website that draws attention and invites to browse and discover all the information it contains. An example can be found in this website

– The Walking Dead

Given the lack of attention in today’s world, creating a parallax scrolling site is a good excuse to tell a story in an entertaining way, by combining web design and comic-style techniques, such as storytelling and illustrations. A good example is the site created by the team of 'The Walking Dead' to show the transformation process of a human into a real zombie.

– Mario Kart

Advertising is a field which can also take advantage of the possibilities offered by parallax, drawing the customer’s attention and showing the full potential of a product by engaging him up to the end to fully discover it. This is how Wii has created the promotional site for the Mario Kart video game.

– Tomato Can Blues

The parallax technique is not only a way to display information, but also a new way to animate it and, as said before, to tell it. An interesting example is found in this story published by The New York Times.

It may interest you