Parallax
Wrapper, der seinen Inhalt beim Scrollen langsamer oder schneller bewegt als die Seite. Nur transform, kein Layout-Shift. Pausiert bei prefers-reduced-motion.
Hintergrund langsamer als Vordergrund
Klassisches Pattern: Hintergrund-Image scrollt mit halber Geschwindigkeit, Text bleibt staehlern stehen.
Hero mit Parallax-Hintergrund
speed=0.4 — markante, aber nicht stoerende Bewegung.
Klimaschutz ist Alltag
Förderprogramme für Solar, Wärme und Mobilität — eine Stadt, ein Plan.
<section class="relative overflow-hidden h-[80vh] rounded-2xl">
<Parallax speed={0.4} direction="up" class="absolute inset-0 -top-[20%] h-[140%]">
<img src="/hero-solar.jpg" alt="" class="w-full h-full object-cover" />
</Parallax>
<div class="absolute inset-0 bg-black/35"></div>
<div class="relative z-10 h-full flex flex-col items-center justify-center text-center px-8">
<h2 class="text-white text-6xl font-bold">Klimaschutz ist Alltag</h2>
<p class="text-white/85 text-xl mt-4 max-w-2xl">Förderprogramme für Solar, Wärme und Mobilität.</p>
</div>
</section>Mehrere Schichten mit verschiedenen Geschwindigkeiten
Tiefe entsteht durch Schichten: weit hinten langsam, näher schneller. Im Beispiel drei Layer (0.15 / 0.35 / 0.55).
Drei Layer für raeumliche Tiefe
↓ scrolle und beobachte die drei Schichten ↓
<div class="relative overflow-hidden h-[70vh]">
<!-- Layer 1: ganz hinten, kaum Bewegung -->
<Parallax speed={0.15} class="absolute inset-0">
<img src="/sky.jpg" />
</Parallax>
<!-- Layer 2: Mitte, mittlere Bewegung -->
<Parallax speed={0.35} class="absolute inset-0">
<img src="/mountains.png" />
</Parallax>
<!-- Layer 3: Vordergrund, schnelle Bewegung -->
<Parallax speed={0.55} class="absolute inset-0">
<img src="/foreground.png" />
</Parallax>
</div>Dekoratives Element mit langer Reise
Ein Solar-Icon das durch den Bereich nach oben "schwebt" während du scrollst. Subtil, kein Stoerer.
Schwebendes Decorative-Element
Solar für alle staedtischen Liegenschaften
Photovoltaik mit bis zu 60 % Förderung. Antragsphase bis März 2026 — kombinierbar mit KfW-Bundesförderung.
<section class="relative h-[60vh] overflow-hidden">
<Parallax speed={0.5} direction="up" class="absolute right-12 bottom-0">
<svg width="120" height="120" aria-hidden="true">...</svg>
</Parallax>
<Parallax speed={0.3} direction="down" class="absolute left-8 top-0">
<svg width="80" height="80" aria-hidden="true">...</svg>
</Parallax>
<h2>Förderprogramm Solar</h2>
</section>Wirkungsweise — schau bewusst nach oben/unten
Die folgenden Bereiche brauchen Scroll-Distanz. Jeder Block hat ein Parallax-Element, das du wandern siehst.
speed = 0.2
kaum spuerbar
Scrolle die Seite und beobachte die Hintergrund-Schrift im Verhältnis zu diesem Text.
speed = 0.4
Standard
Scrolle die Seite und beobachte die Hintergrund-Schrift im Verhältnis zu diesem Text.
speed = 0.6
auffällig
Scrolle die Seite und beobachte die Hintergrund-Schrift im Verhältnis zu diesem Text.
Redakteurshinweise
Wann einsetzen
- Hero-Sections mit Hintergrund-Bild für Tiefe
- Dekorative Symbole, die das Auge führen
- Mehrschichtige Hintergründe für raeumliche Wirkung
- NICHT für wichtige Informationen oder CTAs
Inhalts-Empfehlungen
- Container braucht
overflow: hidden - Hintergrund-Image: 20-40 % größer als Container (damit kein Rand sichtbar wird)
- Speed 0.3-0.5 für dezenten Effekt — alles drüber wirkt unruhig
- Maximal 2-3 Parallax-Elemente pro Seite
Mobile & A11y
prefers-reduced-motion: Parallax komplett deaktiviert- Performance via
requestAnimationFrame+ IntersectionObserver - Mobile: oft besser ohne Parallax — Effekt wirkt nicht auf kleinen Screens
- Decorative Inhalte mit
aria-hidden
Pitfalls
- Kein Text in Parallax — wirkt verschwommen beim Scrollen
- Container ohne
overflow: hiddenverschiebt Page-Layout - Speed über 0.6 ist meist zu auffällig
- Hintergrund muss größer sein als Container, sonst sieht man weisse Raender
Installation
cp-components add parallax