🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Sticky Hero

A sticky hero section that reveals its content on scroll.

Copy: View demo

Dependencies

All components are based on CodyFrame.

This component includes variations. All variations share the same SCSS/JS code. They only differ in their HTML.

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

✅ Project duplicated

✅ Project created

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