Fading Background

Synopsis: The Fading Background checkbox option is available in container to add fading background effect as we scroll down the page. It allows to create a background that fades colours by scrolling

Usage: All pages.

Requirement: https://fiserv-com.atlassian.net/browse/FC-99

Note: This should be used as an example only. There will be additional requirements related to each individual component usage and page design, such as font treatments, padding and margin requirements, ADA compliance etc, so please use the below examples for reference only to demonstrate core function.

Scenario 1

Ingredients: 3Containers

Fading Background can be applied to any container, to create fade effect as we scroll down.


Fading Background Demo