Sticky Hero

A sticky hero section that reveals its content on scroll.

How to

The Sticky Hero component is a section with a background image/video that becomes fixed and reveals its content on scroll.

This effect takes advantage of the CSS position: sticky property value applied to the media element.

The component comes with two variations that you can select using one of the sticky-hero modifier classes:

• sticky-hero--scale: the media element is scaled down when the content is revealed;
• sticky-hero--overlay-layer: a layer (with reduced opacity) is added over the media element when the content is revealed.

We use the IntersectionObserver API to detect when the media element becomes fixed and trigger the media/overlay element animation.

🌄Image/Video credits:

• img by Reinis Birznieks
• video by invisiblepower

Categories

• Content and Layout > Hero
• Effects > Scroll

Bug report & feedback

Component Github page ↗