A sticky hero section that reveals its content on scroll.
All components are based on CodyFrame.
This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.
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.
- img by Reinis Birznieks
- video by invisiblepower