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
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
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