A sticky hero section that reveals its content on scroll.
All components are built upon the CodyHouse Framework.
This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.
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
Bug Report & Feedback
Get in touch: suggest a component or report a bug.