ScrollReveal

Hintergrund-Effekte

Wrapper für Scroll-getriggerte Einblendungen mit sechs Varianten (fade-up, blur-in, zoom-in, …). Standard: IntersectionObserver + CSS-Transition. Mit scrub koppelt sich die Animation an die Scroll-Position (natives CSS animation-timeline: view()) und läuft beim Zurückscrollen rückwärts.

Live Demo

↓ Scrollen Sie nach unten — die Blöcke blenden sich beim Erscheinen ein

Fade Upvariant="fade-up"

Blur Invariant="blur-in"

Zoom Invariant="zoom-in"

Slide Leftvariant="slide-left"

Slide Rightvariant="slide-right"

Fade Invariant="fade-in"

Scrub-Modusscrub — an die Scroll-Position gekoppelt, läuft beim Zurückscrollen rückwärts (animation-timeline: view(), Fallback: Observer)

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`children`	`ReactNode`	Ja	—	Einzublendender Inhalt
`variant`	`'fade-up' \| 'fade-in' \| 'blur-in' \| 'zoom-in' \| 'slide-left' \| 'slide-right'`	Nein	`'fade-up'`	Animations-Variante
`delay`	`number`	Nein	`0`	Verzögerung in ms (für Stagger-Effekte)
`duration`	`number`	Nein	`700`	Dauer in Millisekunden
`distance`	`number`	Nein	`36`	Distanz in Pixeln (fade-up / slide-*)
`once`	`boolean`	Nein	`true`	Nur einmal animieren
`threshold`	`number`	Nein	`0.15`	Sichtbarkeits-Schwelle (0–1)
`scrub`	`boolean`	Nein	`false`	An Scroll-Position koppeln (animation-timeline: view(), mit Observer-Fallback)
`className`	`string`	Nein	—	Zusätzliche CSS-Klasse

Code-Beispiel

<ScrollReveal variant="fade-up">
  <h2>Unsere Leistungen</h2>
</ScrollReveal>

{/* Stagger über delay: */}
{leistungen.map((item, i) => (
  <ScrollReveal key={i} variant="blur-in" delay={i * 120}>
    <LeistungsCard {...item} />
  </ScrollReveal>
))}

{/* An Scroll-Position gekoppelt (läuft rückwärts beim Zurückscrollen): */}
<ScrollReveal variant="zoom-in" scrub>
  <img src="/images/galerie.jpg" alt="" />
</ScrollReveal>