Parallax banner

Note: Rapidly moving, flickering or flashing images may cause severe harm to users with photosensitivity. Adopt subtle animations. Always consider accessibility and inclusion when using parallax.

What is a Parallax page layout?

Parallax page layout is a motion layout where two or more interface layers move at different rates or in different directions. It is often used to enhance a product’s interactivity and increase user engagement. Parallax creates an immersive experience for its users where they generally experience the effects, howbeit subtly. In parallax page layout, the foreground and background could be any combination of static, motion or animated contents. 

Types of Parallax

• Basic parallax - Basic scrolling where the foreground scrolls over a background automatically. No input from the user is required to trigger this effect. Basic parallax can be vertical or horizontal scrolling. Designers should exercise when utilizing horizontal scrolling as they are less intuitive which can affect usability
• Scrolling triggered parallax - Scrolling across a page triggers this parallax effect. These effects include Fade in, Zoom in and Zoom out as the page continues to load
• Mouse controlled parallax - The movement of the mouse cursor triggers the effect. 
• Custom made parallax - Designers are able to create or customize parallax effects as they deem fit for a project.

When to use Parallax page layout?

• When this visual representation is the only way to pass the required information.
• It is used to call attention to certain components or information especially in heavily worded interfaces
• When the aim is to support a narrative or contribute to a brand's identity
• When users do not have a specific task within the page

From Accessibility POV, the parallax is not to be included in the Design Summit System. The parallax page layout template is currently available only for marketing campaign pages. It should be applied across no more than 5% of the entire website. This is a permission only basis where the business unit/client and their product resources are solely responsible for any associated risks. 

• Provide alternative descriptions for parallax effects, such as captions or audio descriptions for access to everyone
• Provide the option to turn off motion and parallax effect