Scroll Reveal

Umfangreiches Animations-System per data-reveal. IntersectionObserver-basiert, steuerbar per CSS-Variablen, respektiert prefers-reduced-motion.

Dateien: styles/utilities/animations.css + components/a11y/scroll-reveal.ts

API & Konfiguration

Steuerung per CSS-Variablen

Alle Animationen sind am Element konfigurierbar: Duration, Delay, Easing, Distance. Ideal für individuelle Hero-Animationen.

default

Standard: 0.6s, kein Delay

--reveal-duration: 1.4s

Läuft viel langsamer

delay: 500ms + distance: 6rem

Wartet und fährt weiter hoch

easing: back-out

Mit Ueberschwinger

data-reveal-delay="15"

1500ms (N × 100ms, auch > 10)

blur-up + 1.2s

Blur-Effekt gestreckt

Fade

Dezente Varianten, ideal für Text und Content

data-reveal="fade"

Simple Fade

data-reveal="fade-up"

Fade nach oben

data-reveal="fade-down"

Fade nach unten

data-reveal="fade-left"

Fade von rechts

data-reveal="fade-right"

Fade von links

data-reveal="fade-tl"

Fade aus Ecke oben-links

data-reveal="fade-tr"

Fade aus Ecke oben-rechts

data-reveal="fade-bl"

Fade aus Ecke unten-links

data-reveal="fade-br"

Fade aus Ecke unten-rechts

Scale

Zoom-Effekte für Cards und Hero-Bilder

data-reveal="scale"

Scale (95% → 100%)

data-reveal="scale-up"

Scale aus klein (50%)

data-reveal="scale-down"

Scale aus gross (150%)

data-reveal="scale-x"

Scale horizontal

data-reveal="scale-y"

Scale vertikal

Slide

Kraeftige Bewegung, z.B. für Sektions-Titel

data-reveal="slide-up"

Slide von unten (kraeftig)

data-reveal="slide-down"

Slide von oben (kraeftig)

data-reveal="slide-left"

Slide von links (kraeftig)

data-reveal="slide-right"

Slide von rechts (kraeftig)

Blur

Weich, filmisch - gut für Lead-Images

data-reveal="blur"

Blur (weich)

data-reveal="blur-up"

Blur + Slide von unten

data-reveal="blur-left"

Blur + Slide von links

data-reveal="blur-right"

Blur + Slide von rechts

Rotate / Swirl

Spielerisch, gut für Icons und Badges

data-reveal="rotate"

Rotate-In (180°)

data-reveal="swirl"

Swirl (540° + Scale)

Flip (3D)

Karten-Umschlag-Effekt

data-reveal="flip-up"

Flip von unten (horizontal)

data-reveal="flip-down"

Flip von oben (horizontal)

Bounce (Sprung)

Energisch, gut für CTAs und Notifications

data-reveal="bounce-up"

Bounce von unten

data-reveal="bounce-down"

Bounce von oben

data-reveal="bounce-left"

Bounce von links

data-reveal="bounce-right"

Bounce von rechts

data-reveal="bounce-in"

Bounce aus Mitte (scale)

Tilt / Swing / Slit

3D-Effekte für Hero-Sektionen

data-reveal="tilt-up"

Tilt von oben

data-reveal="tilt-down"

Tilt von unten

data-reveal="swing-top"

Swing von oben

data-reveal="swing-bottom"

Swing von unten

data-reveal="swing-left"

Swing von links

data-reveal="swing-right"

Swing von rechts

data-reveal="slit"

Slit vertical (3D)

Text

Typografie-Effekte für Headlines

data-reveal="text-focus"

Text Focus (Blur weg)

data-reveal="tracking-expand"

Tracking Expand (weit → normal)

data-reveal="tracking-contract"

Tracking Contract (eng → normal)

Stagger (gestaffelt)

Kinder in einem data-reveal-stagger Container erscheinen nacheinander. Der Abstand laesst sich per --reveal-stagger-step anpassen.

Standard-Step (100ms)

Langsamer Step (250ms) + bounce-up

API & Konfiguration

1. Script initialisieren

<script>
  import { initScrollReveal } from '../components/a11y/scroll-reveal';
  initScrollReveal();
</script>

2. Am Element konfigurieren

<!-- Variante wählen -->
<div data-reveal="fade-up">Standard</div>

<!-- Settings per inline style -->
<div
  data-reveal="slide-left"
  style="
    --reveal-duration: 1.2s;
    --reveal-delay: 200ms;
    --reveal-distance: 10rem;
    --reveal-easing: ease-out;
  "
>Langsamer Slide mit Delay</div>

<!-- Stagger-Container -->
<div data-reveal-stagger style="--reveal-stagger-step: 0.15s;">
  <div data-reveal="fade-up">Kind 1</div>
  <div data-reveal="fade-up">Kind 2</div>
  <div data-reveal="fade-up">Kind 3</div>
</div>

<!-- Numerischer Delay (N × 100ms, beliebige Zahl) -->
<div data-reveal="fade" data-reveal-delay="10">1s delay</div>
<div data-reveal="fade" data-reveal-delay="25">2.5s delay</div>

3. Verfuegbare CSS-Variablen

Variable	Default	Beschreibung
`--reveal-duration`	`0.6s`	Dauer der Animation
`--reveal-delay`	`0s`	Verzögerung (nimmt auch `data-reveal-delay`)
`--reveal-easing`	`cubic-bezier(.16,1,.3,1)`	Easing-Function
`--reveal-distance`	`2rem`	Slide-Distanz (fade-* Varianten)
`--reveal-stagger-step`	`0.1s`	Zeit pro Stagger-Kind (am Container)
`--reveal-animation`	`cp-fade-in`	Keyframe-Name (für eigene Animationen)

4. Eigene Animation hinzufügen

Zwei Zeilen CSS reichen. Das JS muss nichts wissen.

/* 1) Keyframe definieren */
@keyframes my-spin-in {
  from { opacity: 0; transform: rotate(-45deg) scale(0.3); }
  to   { opacity: 1; transform: rotate(0) scale(1); }
}

/* 2) data-reveal-Wert mappen */
[data-reveal="spin-in"] {
  --reveal-animation: my-spin-in;
  --reveal-duration: 0.8s;
}

Dann im HTML: <div data-reveal="spin-in">…</div>

5. initScrollReveal() Optionen

initScrollReveal({
  threshold: 0.15,                  // 15% sichtbar → trigger
  rootMargin: '0px 0px -50px 0px',  // 50px vor Viewport-Ende
  once: true,                       // nur einmal animieren
});

A11y / Barrierefreiheit

prefers-reduced-motion: Alle Animationen werden deaktiviert, Elemente sofort sichtbar.
Screen-Reader: opacity: 0 versteckt visuell, aber Screen-Reader lesen den Inhalt trotzdem vor.
Kein Layout-Shift: Elemente nehmen ihren Platz ein, bevor sie sichtbar werden.
GPU-Performance: Nur opacity, transform, filter — kein Reflow.