How to use parallax on the Web

You may have heard of it before, but perhaps the term seemed barbaric to you. The parallax effect is increasingly used in web design. It consists in moving elements of the page at different speeds when the scroll user. This creates an illusion of depth, and therefore of 3D. This technique is not new, far from it.

Parallax, from 2011 to today

Mastered and popularized by the Nike Better World site in January 2011, due to its revolutionary nature for the time, the effect was then overused and, above all, misused. Some designers and developers wanted to animate everything, in every way, to such an extent that the performance in terms of loading and fluidity became crippling. However, a site that is fast to load obtains Google’s favour for SEO. This has led to a collective awareness. Some sites simply do not need parallax. When you visit a news site, it is to get a quick overview of the day’s information, not to be amazed by unnecessary animations. On the other hand, when used intelligently on sites that want to provide a memorable user experience, parallax always works perfectly. It makes it possible to distinguish your site from that of the competitor and to make it identifiable at a glance.

In 2017, the situation has changed considerably since the effect began in 2011. Our browsers manage most of the CSS3 perfectly and our computers, tablets and even smartphones integrate a graphic card that can display complex animations without flinching. This is how, quite naturally, the parallax came back to the forefront. Even if it is light, it provokes the curiosity of the user who therefore spends more time on your site.

Make good use of the parallax effect on your site

At the moment, a very large number of CSS properties can be animated. However, you don’t want your website to look like a jerky fireworks display! According to many experts, here are the guidelines to follow to create animated sites while remaining fluid (60 FPS – images per second).

Animate only four properties: translate3d, scale, rotate and opacity. Why translate3d and not translate, you might ask? As mentioned above, all our devices now have a graphics card. When you use translate3d, it forces the GPU (graphics processor) to manage translations. So this frees the already well exploited main processor from a heavy task. A word of advice: limit the effects of scale (scaling) and rotate on heavy visuals if you don’t want to have a site that runs in slow motion.

Animate only the elements when they are visible on the screen. This seems logical, but it is always worth remembering that elements that are not visible on the screen are of no interest to the user. So there is no need to animate them when they are outside the viewport.

Use RequestAnimationFrame to optimize fluidity. Our browsers do a complex job: they scan our HTML and CSS files, interpret them and then paint pixels on the screen. RequestAnimationFrame tells your browser that an animation will be calculated at the next “repaint” and optimizes performance. Unlike setInterval, the browser “redoes the painting” when it is free to do so, it is not overloaded by a loop asking it to paint in an abusive and constant way. To learn more, here is an excellent article.

Don’t animate everything just because you can! Choose carefully the elements you want to animate and above all, know how to moderate yourself if fluidity starts to suffer.

Web design: 10 errors that impact your SEO and conversions