Parallax scrolling is a technique that goes a long way back. Anyone who has ever played Super Mario on a Nintendo knows what a parallax scrolling effect is. Simply put: picture a car journey during which you look out of a side window. The objects closer to you roll by faster than objects in the background. This effect is commonly known as the parallax scrolling effect. In web design, it provides an attractive opportunity to visually highlight objects, with the proviso that it be used with caution.
What is the purpose of a judicious use of parallax scrolling?
The objective is clear: due to the different perception of layers and elements, a designer will endeavour to incorporate a certain dynamic or depth into a website or other forms of advertising. The particular feature here is that, quite often, the users themselves are in control of the speed. As an example: are you familiar with image galleries in which you get to click through the images yourself, resulting in the displayed image and the background moving at different speeds? If so, you have encountered the parallax scrolling effect.
Where do we encounter parallax scrolling effects?
Any iPhone user will also be familiar with this effect. Apple has integrated the parallax scrolling effect from iOS 7 onwards in a bid to achieve a realistic surface change during movement. Applications, their background and content adapt to the device’s form and motion, thereby conveying the impression of an individual dynamic. Parallax scrolling does require increased performance, however, which is why it can be deactivated to save battery life.
But what does the parallax scrolling effect have to do with web design?
It is difficult to pinpoint when parallax scrolling made its way into web design. According to rumours, it all started with two large-scale pages that led to the creation of a successful site, spawning multiple imitations. You may ask yourself why the effect has been somewhat slow to develop? Don’t forget: the higher the number of integrated effects on a website, the more varied and diverse the perceptions and thus evaluations of its users. Parallax scrolling has gained in popularity thanks to the HTML5 and CSS3 languages. The aim is to display animations of modules and other layers in a more attractive, modern and contemporary way.
Ideally, parallax scrolling is used for web sites that fall into the category of “storytelling”. For some time now, it is no longer enough to simply display the content of a website. It must be incorporated in a story, which must in turn be conveyed in a visually attractive manner. Parallax scrolling graphically enhances these stories and thus presents them to the user in a more exciting way. The parallax effect is particularly appreciated when users can control the story themselves and are thus able to influence the speed, reading time and flow of the story.
What are the disadvantages associated with the use of parallax scrolling effects?
Parallax scrolling effects require increased performance and are therefore to be recommended only when the displayed content does not exceed a certain capacity. In addition, it should be noted that the parallax scrolling effect is – as the name suggests – merely an effect. It should always be used as an enhancement rather than constituting an essential element. These days, an effect should never distract from the content; instead it should provide a setting for it.