Parallax

The parallax is a visual design component. When scrolling, it allows background and foreground elements to move at different speeds, creating a 3D effect.

Sample

parallax overlay

Scroll down

parallax overlay

Parallax height

Height can be specified by adding height class, such as .height-300

parallax overlay

Light text color

Make light text on dark backgrounds by adding class .color-white

SCROLL DOWN

Parallax Height

height can be specified by adding height class, such as .height-300

Light Text Color

Make light text on dark backgrounds by adding class .color-white

Usage

When and how to use it

Use the parallax component to add depth and visual interest to a page. The movement of the parallax component will draw attention to the content in that section.

The parallax design component is often used on long-scrolling pages.

How not to use it

Do not use the parallax component on multiple pages of your site. Use it sparingly to avoid distracting visitors from your main message.

A parallax may cause dizziness or motion sickness in some people, use caution when adding this to your design.

Accessibility

Standard accessibility review

Each time a new component version is published:

  • Test with the axe accessibility tool
  • Review with the VoiceOver or NVDA screen reader
  • Ensure all actionable elements are accessible by keyboard command and tab in a logical order
  • Check the component layout on a variety of screen sizes