Was ist der Parallax-Effekt?

Sie sitzen im Zug, der Blick fällt nach draußen. Die Telegrafenmasten direkt am Gleis flitzen vorbei, fast unscharf. Der Wald dahinter zieht in gemächlichem Tempo. Und die Bergkette weit hinten? Steht scheinbar still.

Niemand hat die Masten beschleunigt. Niemand hat die Berge angehalten. Was sich verändert hat, ist Ihr eigener Standpunkt.

Genau das ist der Parallax-Effekt: eine visuelle Verschiebung, die entsteht, wenn sich der Betrachter bewegt und Objekte in unterschiedlicher Entfernung unterschiedlich schnell zu wandern scheinen. Die Astronomie nutzt dieses Prinzip seit Jahrhunderten, um Sterndistanzen zu messen. Die Fotografie kennt es als Sucher-Verzerrung. Und das Webdesign hat es sich vor gut zwei Jahrzehnten geliehen, um Bildschirmen das zu geben, was ihnen physikalisch fehlt: Tiefe.

Der Parallax-Effekt erzeugt räumliche Tiefe, indem sich nahe und ferne Ebenen beim Scrollen unterschiedlich schnell bewegen.

Wie der Parallax-Effekt im Webdesign funktioniert

Eine Webseite ist flach. Pixel auf Glas. Der Parallax-Effekt täuscht dem Auge eine dritte Dimension vor, indem mehrere Ebenen einer Seite beim Scrollen mit unterschiedlichem Tempo bewegt werden.

Der Hintergrund schleicht. Der Inhalt fließt im normalen Tempo. Vereinzelte Elemente eilen voraus. Der Eindruck: Räumlichkeit. Bewegung. Der Nutzer hat das Gefühl, durch eine Szene zu gehen, statt auf einer Seite zu scrollen.

Wirken tut das selten durch Magie. Meistens sind es ein paar Zeilen CSS, manchmal etwas JavaScript.

Die technischen Grundlagen

Im Kern werden HTML-Elemente während des Scrollens neu positioniert. Eine wichtige Regel vorweg, an der die meisten Implementierungen scheitern: Manipuliert wird über transform und opacity. Beides läuft auf dem Compositor-Thread des Browsers, also GPU-beschleunigt. Wer stattdessen top, left oder margin bei jedem Scroll-Event verändert, zwingt den Browser zu Layout-Berechnungen. Das Ergebnis sehen Sie auf jedem zweiten Smartphone: ruckelnde Animationen, die das Gegenteil von dem bewirken, was sie versprechen.

Die einfachste Variante mit reinem CSS

Die simpelste Methode kommt ohne eine Zeile JavaScript aus:

.parallax {
  background-image: url('background.jpg');
  min-height: 400px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

background-attachment: fixed hält das Hintergrundbild im Viewport fest. Der Vordergrundtext scrollt darüber hinweg. Das Auge interpretiert: Tiefe.

Eine Warnung dazu, die in der Praxis oft fehlt: Auf den meisten mobilen Browsern wird fixed schlicht ignoriert. iOS Safari und große Teile von Android zeigen das Bild dann starr neben dem Inhalt, der Effekt verpufft. Wer mobile Nutzer ernst nimmt, braucht Plan B.

Scroll-driven Animations: der moderne Weg

Seit etwa zwei Jahren steht in nahezu allen aktuellen Browsern eine native CSS-Lösung bereit, die ohne JavaScript auskommt und dabei butterweich läuft:

@keyframes parallaxShift {
  to { transform: translateY(-200px); }
}

.parallax-layer {
  animation: parallaxShift linear;
  animation-timeline: scroll();
}

Statt die Animation an die Zeit zu koppeln, koppelt animation-timeline: scroll() sie direkt an die Scroll-Position. Die GPU rechnet, der Hauptthread bleibt frei für andere Aufgaben. Auch auf älteren Smartphones bleibt es flüssig. Die vollständige Spezifikation und weitere Anwendungsbeispiele finden Sie auf MDN Web Docs.

JavaScript, aber bitte nur dort, wo es nötig ist

Manchmal braucht es doch JavaScript. Etwa wenn mehrere Ebenen mit präzise unterschiedlichen Geschwindigkeiten arbeiten sollen oder externe Daten ins Spiel kommen. Dann gilt: requestAnimationFrame statt direkter Scroll-Listener. transform statt Positionseigenschaften. Auf jQuery können Sie 2026 verzichten.

const layer = document.querySelector('.parallax');

window.addEventListener('scroll', () => {
  window.requestAnimationFrame(() => {
    const offset = window.scrollY * 0.5;
    layer.style.transform = `translateY(${offset}px)`;
  });
});

Knapp, modern, schnell. Kein Framework, kein Plugin, keine 80 Kilobyte zusätzlich auf der Leitung.

Was der Parallax-Effekt leistet

1. Räumliche Tiefe. Eine flache Fläche bekommt Charakter. Inhalte gewinnen Hierarchie, ohne dass eine einzige zusätzliche Information dazukommen muss.
2. Aufmerksamkeit halten. Eine Seite, die sich bewegt, wirkt lebendig. Nutzer scrollen weiter, weil sie wissen wollen, was im nächsten Akt passiert.
3. Erzählerische Wirkung. Der Effekt eignet sich für Storytelling. Eine Marke kann durch gestaffelte Ebenen eine Geschichte entfalten, die sich linear durch das Scrollen erschließt.
4. Differenzierung. Wer den Effekt geschmackvoll einsetzt, hebt sich vom Einheitsdesign ab, das auf 80 Prozent aller Templates klebt.

Wo der Effekt scheitert

Ehrlichkeit gehört zur Aufklärung. Parallax ist kein freies Geschenk.

1. Performance. Schlecht implementierter Parallax kostet Frames. Auf älteren Geräten wird Ihre eindrucksvolle Inszenierung zur ruckelnden Diashow.
2. Mobile Geräte. Was am 27-Zoll-Monitor majestätisch wirkt, kann auf einem 6-Zoll-Display verwirren. Die Bewegung passt nicht zur Daumengeste.
3. Ladezeit und SEO. Schwere Bilder, externe Skripte, parallaktische Layer: Jede Sekunde Ladezeit kostet Conversion und Ranking. Google misst Core Web Vitals. Die hören nicht auf, weil eine Seite hübsch ist.
4. Barrierefreiheit. Menschen mit vestibulären Beschwerden bekommen von Bewegungseffekten schlicht Übelkeit. Wer das nicht ernst nimmt, schließt einen Teil seines Publikums aus.

Über den letzten Punkt wird zu selten gesprochen. Mehr dazu im nächsten Abschnitt.

Best Practices: weniger ist mehr

1. Bewusst und sparsam einsetzen

Der Parallax-Effekt ist ein Gewürz, kein Hauptgang. Eine Hero-Section profitiert oft. Eine ganze Seite mit fünf Parallax-Layern ermüdet. Fragen Sie sich vor jedem Einsatz: Trägt der Effekt zur Botschaft bei, oder lenkt er nur ab?

2. Bewegung respektieren mit prefers-reduced-motion

Das wichtigste Feature, das die meisten Implementierungen ignorieren:

@media (prefers-reduced-motion: reduce) {
  .parallax-layer {
    animation: none;
    transform: none;
  }
}

Wer in den Systemeinstellungen reduzierte Bewegung aktiviert hat, sagt damit: „Ich will keine animierten Effekte.“ Diesen Wunsch respektieren Sie mit drei Zeilen Code. Wer ihn ignoriert, baut Ausschluss in seine Marke ein.

3. Performance messen, nicht hoffen

Browser-Tools wie Lighthouse oder der Performance-Tab in den Chrome DevTools zeigen, ob Ihre Animation flüssig läuft. Hoffnung ist keine Strategie. Messen Sie. Optimieren Sie. Messen Sie erneut.

4. Mobile zuerst denken

Was auf dem Desktop trägt, kann auf Mobile zerfallen. Entweder schalten Sie den Effekt auf kleinen Bildschirmen ganz ab, oder geben Sie ihm eine eigene, dezentere Choreographie.

5. Inhalt vor Effekt

Kein Parallax-Effekt rettet einen schwachen Inhalt. Aber jeder schwache Inhalt wird durch zu viel Bewegung noch sichtbarer in seiner Leere.

Wenn der Effekt sich lohnt

Einige Marken zeigen seit Jahren, wie Parallax kein Gimmick sein muss, sondern Erzählung. Apple inszeniert Produkt-Stories häufig mit dezenten Tiefenebenen, die das Auge gerade so führen, dass es bleibt. Andere Hersteller von Konsumgütern nutzen den Effekt für lange Scroll-Geschichten, in denen das Produkt erst nach mehreren Etappen sichtbar wird.

Was diese Beispiele eint: Der Effekt steht im Dienst der Geschichte. Nicht umgekehrt.

Fazit

Der Parallax-Effekt borgt sich eine physikalische Wahrheit, um eine digitale Illusion zu erzeugen. Richtig eingesetzt, gibt er flachen Seiten Tiefe und Inhalten einen Rhythmus, den sie sonst nicht hätten. Falsch eingesetzt, ist er Lärm im Auge des Betrachters.

Die wichtigere Frage ist nicht: Wie baue ich Parallax? Die wichtigere Frage ist: Was erzähle ich eigentlich, und braucht diese Erzählung wirklich eine zweite Ebene?

Wenn die Antwort Ja lautet, ist Parallax ein eleganter Komplize. Wenn sie ehrlicherweise Nein lautet, sparen Sie sich den Aufwand. Eine ruhige, klare Seite hat in fast jedem Fall mehr Wirkung als eine bewegte, die nicht weiß, warum sie sich bewegt.