Parallax Scrolling

Parallax Scrolling describes a trend in web design. Websites with parallax scrolling can be controlled using the scroll function. If the user scrolls down, the elements of the website move at different speeds. A background image moves slowly, while images or graphic elements move faster in the foreground.

This so-called "parallax effect" gives the user an impression of depth - the website appears like a 3D animation, which is continued by scrolling downwards. This operating concept is particularly suitable for storytelling, as the consumption of content can be supported by scroll effects, animations and superimpositions. Synonyms for Parallax Scrolling in web design are Parallax Website, Scrolling Website and Parallax Web Design.

General Information

Parallax Scrolling works with the so-called movement parallax. When an observer moves parallel to two objects, the objects appear to move at different speeds. The closer object seems to move faster, the farther away object seems to move slower. This psychological effect creates a special depth perception for the observer, as the light reflections of the near object hit the retina more quickly. The human brain processes these stimuli in such a way that the depicted space is perceived as in 3D.

The effect of the parallax of motion is relevant in geometry, astronomy, photography and metrology. In 2D video games, parallax is used to create depth and give orientation to the player. For some years now, the Parallax scrolling effect has also been used in web design. The aim is to improve the acceptance of the information presented and to make use of the website more interactive. Users should remember the information on the presentation and should feel "joy of use" when operating the website.

How it works

The parallax motion can be generated on websites in different ways. As a rule, background images and picture elements are used in the foreground in such a way that the viewer moves through the scenery with the scroll function. The overall picture or the visible above the fold area is the fixed point - also known as viewport - for the viewer: The website moves from this fixed point to a certain extent, while individual elements move faster and slower. These movements are caused by slides, fade out, fade in and fixed elements such as text or graphics, which are constantly loaded by the so-called HTML reflow. The arrangement of the partially animated elements on the motion parallax results in a dynamic appearance of the contents: The user "experiences" the contents because they move horizontally.

The website itself is often conceptually a single page website or One Pager: source code, texts, images, images, CSS and scripts can be found in a document stored on a server. With selectors, CSS tags and script calls the effects are triggered after they have been initiated by a scrolling movement by the user. Increased use of scripts, detailed graphics, high-resolution images or complex rendering can increase the loading time of the content. Therefore, a discreet use of the effects and a slim source code are recommended. Ideally, parallax scrolling is part of the entire website concept, which can also be a multi-page website if used in a targeted way.

In Practice

The most common application is storytelling. Here the contents are arranged in such a way that a story is told while the user scrolls down. The information offered and the technical presentation of the contents are combined. Freelancer websites, online shops, landing pages with a high proportion of call to action, websites for product launches and advertising campaigns also benefit from Parallax Scrolling for storytelling. From the point of view of web design, the following factors are relevant when displaying information using parallax scrolling:

• Parallax Scrolling should be used in a minimalistic way in the sense of a flat design.
• It should act as visual storytelling.
• It should be fun for the user and not frustrating.
• It should entice the user to take action, for example to contact a firm or order a product.
• It should be compatible with older browsers, and work problem free on mobile browsers.

If these standards do not play a role in the implementation of a Parallax Scrolling website, significant problems can arise on the user's website. In the worst case, the website is unusable, the information is not recordable and it misses its target. Too many technical gadgets could lead to frustrated users and damage the image.

Another difficulty is that different frameworks and methods are available to implement parallax scrolling. For example:

• JavaScript
• HTML5 and CSS3
• Spezielle Plugins and Module
• jQuery

HTML5 with corresponding CSS3 effects and as few scripts as possible is currently regarded as the best way.

Significance for programming

Parallax Scrolling was celebrated as a trend and has been used in many successful projects. However, these websites were specially designed for this purpose. If you see Parallax Scrolling as an end in itself, you would be advised to consider other types of web design. However, it is particularly suitable as a means of storytelling - especially if the goal of the website is clearly defined and the implementation of the project follows all the rules of the art.

Similar to OnePager websites, it is essential to observe SEO- and performance criteria: Only the OnPage factors of individual pages can be optimized and the width of keywords is also limited. Internal links are only possible to a limited extent and not all Parallax Scrolling websites are responsive and suitable for mobile devices. Although Google is now relatively good with JavaScript code, the text-to-code ratio may not be very high.

Web Links

• Definition Parallax Scrolling
• Definition Parallax
• Parallax Scrolling Tutorials
• User Experience and Parallax Scrolling