JS-IT ← Alle Notizen
24. Juli 2026

Parallax mit Bedacht

Mehrere Ebenen, die sich unterschiedlich schnell bewegen, erzeugen Tiefe. Der Grat zwischen Wirkung und Kitsch ist schmal — hier die Regeln, die ihn halten.

↓ In diesem Feld scrollen

Ebene 4 · 1,0×

Der Text im Vordergrund gibt das Tempo vor. Die Punkte dahinter folgen langsamer — jede Ebene mit ihrem eigenen Faktor.

Tiefe entsteht

Weil sich nähere Dinge schneller verschieben als ferne, liest das Auge Räumlichkeit — derselbe Effekt wie beim Blick aus dem fahrenden Zug.

mit Bedacht

Kleine Faktoren, wenige Ebenen, ruhige Formen. Der Text bleibt jederzeit gut lesbar — die Tiefe schmückt, sie überlagert nicht.

flüssig

Nur die Verschiebung (transform) ändert sich — keine Layout-Neuberechnung. Das bleibt geschmeidig, auch mobil.

Vier Ebenen, vier Geschwindigkeiten. Der Text gibt das Tempo vor, die Punkte dahinter folgen langsamer — daraus liest das Auge Tiefe.

Was Parallax ist

Nähere Dinge ziehen schneller am Auge vorbei als ferne. Diesen Alltagseindruck — der Blick aus dem fahrenden Zug — überträgt Parallax auf die Fläche: Mehrere Ebenen verschieben sich beim Scrollen mit unterschiedlichem Tempo. Das Gehirn liest daraus Räumlichkeit, obwohl der Bildschirm flach bleibt.

In der Demo oben gibt der Text im Vordergrund das Tempo vor. Die Punkte dahinter folgen langsamer, jede Ebene mit ihrem eigenen Faktor. Scrolle im Feld, und die Tiefe entsteht.

Warum es so oft misslingt

Parallax hat einen zweifelhaften Ruf, und der ist verdient — dort, wo es übertrieben wird: zu viele Ebenen, zu große Geschwindigkeitsunterschiede, Text, der wegrutscht, bevor man ihn gelesen hat. Dann kippt Tiefe in Unruhe, und der Inhalt leidet.

Die Regeln, die den Grat halten

  • Wenige Ebenen. Drei bis vier reichen, um Tiefe zu lesen. Mehr erzeugt Lärm, keinen zusätzlichen Raum.
  • Kleine Faktoren. Die Hintergründe bewegen sich deutlich langsamer als der Vordergrund, aber nicht extrem. Der Text bleibt die schnellste, klar führende Ebene.
  • Der Inhalt führt. Lesbarkeit steht über dem Effekt. Die Tiefe schmückt den Text, sie überlagert ihn nie.
  • Nur verschieben. Bewegt wird ausschließlich die Position (per transform), nicht das Layout. Das erspart dem Browser teure Neuberechnungen und bleibt geschmeidig, auch mobil.

Wann einsetzen

Für ruhige Akzente: ein Titelbereich, ein Übergang zwischen Kapiteln, eine Bühne, die Aufmerksamkeit sammeln soll. Nicht für Fließtext, den man konzentriert liest. Und wer Bewegung reduziert haben möchte, sieht die Ebenen ruhend gestaffelt — die Tiefe bleibt erkennbar, ohne dass sich etwas bewegt.