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

Example
Source code

Example

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

Source code

<div class="parallax-bg height-400" style="background-image: url(/images/background-primary.jpg)">
        <div class="section-impact width-200 height-80 brd-gray-light brd-solid-1 relative-centered">
         <h3 class="h5 text-center m-0 p-a-md relative-centered">SCROLL DOWN</h3>
        </div>
       </div>
       <div class="parallax-bg height-300" style="background-image: url(/images/bg-open-data.jpg)">
        <div class="container p-y-lg">
         <h3 class="text-center">Parallax Height</h3>
         <p class="text-center">height can be specified by adding height class, such as
          <code class="color-black">.height-300</code>
         </p>
        </div>
       </div>
       <div class="parallax-bg height-300 bg-dark" style="background-image: url(/images/main-banner4.jpg)">
        <div class="container p-y-lg">
         <h3 class="text-center color-white">Light Text Color</h3>
         <p class="text-center color-white">Make light text on dark backgrounds by adding class .color-white
         </p>
        </div>
       </div>

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