Hero Scroll Animation

Hero section with scroll-driven parallax animation. Content fades out as images slide in on scroll.

← Back to components GitHub Repo Playground npm

Basic Usage

Scroll down through the hero to see the parallax effect. The content fades out while a center image rises and side images slide in.

Discover Amazing Places

Scroll down to explore a beautiful parallax experience with images sliding into view.

Keep scrolling for the next demo...

Basic Usage - Code

<hero-scroll-animation>
  <img slot="background" src="bg.jpg" />
  <img slot="center" src="center.png" />
  <img slot="left" src="left.png" />
  <img slot="right" src="right.png" />
  <div slot="content">
    <h1>Discover Amazing Places</h1>
    <p>Scroll down to explore...</p>
  </div>
</hero-scroll-animation>

With Background Text

Use the background-text attribute to add large decorative text behind the images.

Premium Collection

A curated selection of the finest experiences.

Keep scrolling for the next demo...

With Background Text - Code

<hero-scroll-animation background-text="PREMIUM" scroll-height="400">
  <img slot="background" src="bg.jpg" />
  <img slot="center" src="center.png" />
  <img slot="left" src="left.png" />
  <img slot="right" src="right.png" />
  <div slot="content">
    <h1>Premium Collection</h1>
    <p>A curated selection...</p>
  </div>
</hero-scroll-animation>

Custom Overlay Opacity

Adjust the dark overlay with overlay-opacity="0.7" for a more dramatic effect.

Dark Overlay

A heavier overlay makes the content text more readable on busy backgrounds.

End of demos

Custom Overlay Opacity - Code

<hero-scroll-animation overlay-opacity="0.7" scroll-height="350">
  <img slot="background" src="bg.jpg" />
  ...
</hero-scroll-animation>

CSS Custom Properties

Customize the hero appearance with CSS custom properties.

Property	Default	Description
`--hero-accent-color`	`#bfa15f`	Accent color for decorative elements
`--hero-text-color`	`#f0f0f0`	Default text color inside the hero
`--hero-bg-gradient-start`	`#d4af37`	Start color for the background text gradient
`--hero-bg-gradient-end`	`#f4e4b0`	End color for the background text gradient

<hero-scroll-animation style="
  --hero-accent-color: #e63946;
  --hero-bg-gradient-start: #e63946;
  --hero-bg-gradient-end: #f4a261;
">
  ...
</hero-scroll-animation>