Der Parallax-Effekt ist ein Gestaltungsmittel, bei dem sich Ebenen einer Seite beim Scrollen unterschiedlich schnell bewegen. Der Hintergrund wandert langsamer als der Vordergrund, wodurch ein Eindruck von Tiefe entsteht.
- Parallax-Effekt
Gestaltungsmittel, bei dem sich Ebenen beim Scrollen unterschiedlich schnell bewegen.
Beispiel: „Im Hero-Bereich sorgt ein Parallax-Effekt dafür, dass das Hintergrundbild langsamer mitläuft.“Auch: Parallax Scrolling oder Parallaxen-Effekt. Der Name stammt aus der Astronomie und bezeichnet die scheinbare Verschiebung eines Objekts bei wechselndem Blickwinkel.
Abgrenzung zum Scrollytelling: Der Parallax-Effekt ist reine Optik. Beim Scrollytelling steuert das Scrollen den Ablauf einer Erzählung.
Wie er umgesetzt wird
Sparsam und über Verschiebungen. Die Ebene wird um einen Bruchteil der Scrollstrecke verschoben, und zwar über transform, das der Browser ohne neues Layout darstellen kann. Umsetzungen, die stattdessen Positionen oder Abstände ändern, erzwingen bei jedem Scrollschritt eine Neuberechnung.
Zwei Ebenen reichen für den Eindruck. Drei und mehr kosten Rechenzeit, ohne dass der Unterschied noch auffällt, und machen das Zusammenspiel beim Ändern von Inhalten unberechenbar.
Was er kostet
Rechenzeit beim Scrollen und damit Flüssigkeit. Gerade auf älteren Telefonen führt ein aufwendiger Effekt zu ruckelndem Scrollen, und ruckelndes Scrollen fällt stärker auf als jeder gelungene Effekt. Deshalb schalten viele Umsetzungen ihn unterhalb einer bestimmten Breite ab.
Dazu kommt eine Anforderung der Barrierefreiheit: Nach Animation aus Interaktionen (2.3.3) muss sich eine durch Scrollen ausgelöste Bewegung abschalten lassen. Bewegung im Sichtfeld löst bei manchen Menschen Übelkeit und Schwindel aus.
@media (prefers-reduced-motion: reduce) {
.parallax-ebene { transform: none !important; }
}Wann er passt
Bei einem einzelnen Bildwechsel im Kopfbereich, bei Bildstrecken und auf Seiten, die ohnehin vom Sehen leben. Auf Leistungs- und Formularseiten lenkt er von dem ab, worum es geht.
Aus unserer Arbeit an über 2.500 Website-Projekten hält sich der Effekt am besten dort, wo er kaum auffällt: ein Hintergrund, der leicht nachzieht. Alles, was beim Scrollen offensichtlich arbeitet, wirkt nach zwei Jahren wie aus der Zeit gefallen.