Loading...

Featured

A dark hero image above the fold

With invertOnTransparent on, the header reads against this image in light mode. Scroll down to see it switch to a solid background that follows the page theme.

Light content below

As soon as you scroll past the hero, the header gains a solid surface via scrollEffect and the inversion stops. The header now uses the page's actual theme.

Card 1

Spacer content so the page is tall enough to scroll past the hero and trigger the scroll effect.

Card 2

Spacer content so the page is tall enough to scroll past the hero and trigger the scroll effect.

Card 3

Spacer content so the page is tall enough to scroll past the hero and trigger the scroll effect.

Card 4

Spacer content so the page is tall enough to scroll past the hero and trigger the scroll effect.

Card 5

Spacer content so the page is tall enough to scroll past the hero and trigger the scroll effect.

Card 6

Spacer content so the page is tall enough to scroll past the hero and trigger the scroll effect.

Demo controls

invertOnTransparent