Parallax-Scrolling mit reinem CSS: Perspective und Scroll-Driven
Bau Parallax mit CSS perspective und translateZ oder mit Scroll-Driven Animations, sieh die Tiefenrechnung live und geh richtig mit Handys und reduzierter Bewegung um.
Für Parallax mit reinem CSS gibt es zwei zuverlässige Methoden. Die Perspective-Methode macht einen Scroll-Container mit perspective und schiebt Hintergrundebenen mit translateZ nach hinten, dann skaliert sie sie um (perspective minus z) geteilt durch perspective hoch. Die neuere Methode koppelt eine translate-Animation an animation-timeline: view(). Beide sollten sich bei prefers-reduced-motion abschalten.
Drei Wege zu einem Parallax-Effekt
Methode
Wie es sich bewegt
Worauf du achten musst
perspective + translateZ
Tiefere Ebenen scrollen in einem 3D-Scroll-Container langsamer
Braucht einen eigenen Scroll-Container, nicht die Seite
animation-timeline: view()
Ein translate per Keyframe folgt dem Element durch den Viewport
Chrome und Edge 115+, Safari 26+, Firefox 161+
background-attachment: fixed
Der Hintergrund steht still, während Inhalt darüber gleitet
Teilweise Unterstützung in iOS Safari; ruckelt auf vielen Handys
JavaScript-Fallback
Die Scroll-Position setzt in jedem Frame ein transform
Nutze requestAnimationFrame und einen passiven Listener
Die meisten Parallax-Tutorials hören bei background-attachment: fixed auf, das iPhones nur teilweise unterstützen. Diese Anleitung zeigt die zwei Methoden, die Ebenen wirklich animieren, erklärt die Skalierungsrechnung, damit deine Ebenen nicht schrumpfen, und liefert ein kleines Skript als Fallback plus den Umgang mit reduzierter Bewegung, damit der Effekt niemandem flau im Magen werden lässt.
Bewege den Tiefen-Regler im Playground, um die Hintergrundebene weiter nach hinten zu schieben.
Scrolle die Vorschau und vergleiche, wie schnell sich die hintere Ebene gegenüber dem vorderen Text bewegt.
Lies die berechnete Skalierung und Geschwindigkeit ab, genau diese Werte nutzt das CSS unten.
Kopiere die passende Methode: perspective für einen abgeschlossenen Hero, view() für Abschnitte auf einer normalen Seite.
Eine Ebene mit translateZ(z) unter perspective p bewegt sich mit p geteilt durch (p minus z) der Scroll-Geschwindigkeit.
Setze overflow-x: hidden auf den Parallax-Container, da skalierte Ebenen breiter sind als ihre Box.
Deklariere animation-timeline nach der animation-Kurzschreibweise, weil die Kurzschreibweise sie auf auto zurücksetzt.
Pack Bewegung in @media (prefers-reduced-motion: no-preference), damit der Effekt standardmäßig ein Opt-in ist.
Häufige Fragen
Warum sieht meine translateZ-Ebene kleiner aus?
Ein Element mit negativem translateZ vom Betrachter wegzuschieben verkleinert es, genau wie ein weit entferntes Objekt. Füge scale((p - z) / p) hinzu, um seine Größe wiederherzustellen. Mit perspective: 1px und translateZ(-2px) ergibt das scale(3).
Funktioniert background-attachment: fixed auf Mobilgeräten?
Nicht zuverlässig. caniuse führt in iOS Safari nur teilweise Unterstützung und weist darauf hin, dass die meisten Mobilgeräte einen fixierten Hintergrund nach dem Scrollen nur langsam aktualisieren. Betrachte es als Extra nur für den Desktop und nutze eine der transform-Methoden, wenn es auf den Effekt ankommt.
Ist Parallax schlecht für die Barrierefreiheit?
Große, ans Scrollen gekoppelte Bewegungen können bei Menschen mit vestibulären Störungen Schwindel oder Übelkeit auslösen. Respektiere die Systemeinstellung für reduzierte Bewegung mit der Media Query prefers-reduced-motion und zeig die Ebenen statisch, wenn sie aktiv ist.
Welche Browser unterstützen Scroll-Driven Parallax?
Stand Oktober 2026 führt caniuse animation-timeline in Chrome und Edge ab 115, Safari ab 26 und Firefox ab 161. Ältere Browser überspringen die Animation einfach, die Seite bleibt also auch ohne den Effekt korrekt lesbar.
So funktioniert die Perspective-Methode
Der Container wird zum Scroller und bekommt einen perspective-Wert. Seine Kinder behalten mit transform-style: preserve-3d ihre 3D-Position. Scrollt der Container, legt eine weiter hinten in z liegende Ebene weniger Strecke auf dem Bildschirm zurück als eine bei z gleich null, und scheint daher hinterherzuhinken.
Da perspective an einem Element auch einen Stacking Context und einen Containing Block für fixierte Kinder erzeugt, halte den Parallax-Wrapper in sich geschlossen. Header, die am Fenster fixiert bleiben müssen, gehören nach außerhalb.
Handys und ältere Browser
Chromes eigener Artikel zu performantem Parallax weist darauf hin, dass Momentum-Scrolling unter iOS früher den 3D-Kontext abgeflacht hat, was den Perspective-Trick auf iPhones zunichtemachte. Teste auf einem echten Gerät und halte den Inhalt lesbar, wenn sich die Ebenen nicht bewegen.
Die Scroll-Driven-Methode hat dieses Problem nicht, weil sie auf dem normalen Scroller der Seite läuft. Wo sie nicht unterstützt wird, laufen die Keyframes nie, und die Ebene bleibt in ihrer Ruheposition, was ein sauberer Fallback ist.
Methode 1: perspective und translateZ
Hero mit zwei Ebenen in eigenem Scroller
Scrolle innerhalb des Rahmens. Die gestreifte Ebene liegt bei translateZ(-2px) und ist um 3 skaliert, sie bewegt sich also mit einem Drittel der Scroll-Geschwindigkeit.
Methode 2: Scroll-Driven mit view()
Bild, das driftet, während sein Abschnitt den Bildschirm durchquert
Die Animation läuft nur dort, wo animation-timeline unterstützt wird und der Leser keine reduzierte Bewegung angefordert hat.
JavaScript-Fallback
Kleines Parallax mit requestAnimationFrame
Wird nur genutzt, wenn Scroll-Driven Animations fehlen. Der Listener ist passiv, und die Arbeit passiert einmal pro Frame.
Tiefen-Playground
Tiefe der hinteren Ebene (translateZ): {n}px
Nötige Skalierung: {v}
Geschwindigkeit der hinteren Ebene: {v} des Scrollens
Parallax-Vorschau, scrolle darin
Der vordere Text bewegt sich mit voller Geschwindigkeit
Scrolle weiter, um zu sehen, wie die hintere Ebene zurückbleibt.
Dein Gerät fordert reduzierte Bewegung an, daher bleibt die Vorschau still.