Go to homepage

Projects /

Sticky Hero

A sticky hero section that reveals its content on scroll.

View Demo

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


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.