Parallax-Effekt: Tiefe beim Scrollen und im Motion Design

Ein Parallax-Effekt lässt ein flaches Design tief wirken, indem er seine Ebenen unterschiedlich schnell bewegt: Der Hintergrund treibt langsam, die Mitte etwas schneller und der Vordergrund am schnellsten, so wie ferne Hügel am Zugfenster vorbeikriechen, während die Zaunpfähle vorbeirasen. Auf Websites passiert das meist beim Scrollen. Im Motion Design passiert es über die Zeit, in einem Loop oder Video. In beiden Fällen ist der beste Parallax klein, langsam und abgeschaltet für alle, die ihr Gerät um weniger Bewegung gebeten haben.

Wie Parallax Tiefe erzeugt

Dein Gehirn schätzt Entfernung teilweise über relative Bewegung. Bewegen sich zwei Ebenen gleich schnell, wirken sie wie eine flache Fläche. Bewegt sich eine langsamer, wirkt sie weiter weg. Drei Ebenen reichen meist für überzeugende Tiefe.

Parallax-Effekt in CSS mit scrollgesteuerten Animationen

Modernes CSS kann eine Animation mit animation-timeline an die Scrollposition statt an die Zeit binden. Der Browser führt sie abseits des Hauptthreads aus, sodass sie flüssig bleibt, und JavaScript ist nicht nötig. Die Unterstützung wächst noch: Es funktioniert in Chromium-Browsern und aktuellem Safari, prüf also die Browserunterstützung auf MDN und behandle den Effekt als Zusatz. Ohne Unterstützung bewegt sich die Seite einfach nicht, und das ist in Ordnung.

.hero {
  position: relative;
  overflow: clip;
  isolation: isolate;          /* keeps the layer inside the hero */
  min-height: 80vh;
  view-timeline: --hero block;
}

.hero__bg {
  position: absolute;
  inset: -15% 0;               /* extra room so edges never show */
  background:
    radial-gradient(circle at 75% 20%, #7c3aed 0%, transparent 45%),
    linear-gradient(170deg, #0f0b1e 0%, #1e1b4b 100%);
  z-index: -1;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero__bg {
      animation: hero-depth linear both;
      animation-timeline: --hero;
    }
  }
}

@keyframes hero-depth {
  from { transform: translateY(-10%); }
  to   { transform: translateY(10%); }
}

Die Stärke der Bewegung steckt in den Keyframes: 10 % in jede Richtung ist sanft. Geh über 20 % hinaus, und der Effekt fühlt sich an wie eine Achterbahnfahrt. Wenn du transform statt top oder background-position bewegst, bleibt das Zeichnen für den Browser günstig. Performance von CSS-Verläufen erklärt, warum große animierte Verläufe sich bewegen und nicht neu zeichnen sollten.

Andere Wege zu Parallax Scrolling

Parallax und reduzierte Bewegung

Bei Menschen mit vestibulären Störungen kann große, durch Scrollen ausgelöste Bewegung Schwindel und Übelkeit verursachen. Die WCAG-Hinweise zu Animationen durch Interaktion verlangen, dass sich solche Bewegung abschalten lässt. Am einfachsten respektierst du das, indem du Parallax in prefers-reduced-motion: no-preference einschließt, wie im Code oben, sodass er nur für Besucher läuft, die nicht um weniger Bewegung gebeten haben. Prefers reduced motion behandelt die Media Query und wie du sie testest.

Parallax in Motion Design und Video

Parallax gibt es nicht nur beim Scrollen. In einem bewegten Post, einem Loop oder einem Vorspann erzeugt dieselbe Regel Tiefe über die Zeit: ein Hintergrund, der langsam treibt, Licht oder Partikel, die sich etwas schneller bewegen, und Wörter, die davor stillstehen. Der letzte Teil ist wichtig. Stehende Wörter auf einer sanft bewegten Fläche wirken ruhig und selbstbewusst, treibende Wörter dagegen unruhig.

Partikel sind eine natürliche mittlere Ebene: Partikeleffekte zeigt, wie kleine, blasse Punkte, die sich etwas schneller als der Hintergrund bewegen, eine zweite Tiefenebene hinzufügen. Halte die Bewegung jeder Ebene langsam und weich; Prinzipien des Motion Designs erklärt, warum.

Einen Parallax-Hero gestalten, Schritt für Schritt

1. 1

   Zuerst still gestalten

   Der Hero muss ganz ohne Bewegung fertig aussehen, denn genau das sehen Besucher mit reduzierter Bewegung und Browser ohne Unterstützung.

2. 2

   Die Ebenen trennen

   Leg das Hintergrundfarbfeld auf eine eigene Ebene, Formen oder Fotos auf eine zweite und Headline und Button auf die Seite selbst.

3. 3

   Nur die hintere Ebene bewegen

   Fang damit an, nur den Hintergrund um 10 % in jede Richtung zu bewegen. Füg eine mittlere Ebene nur hinzu, wenn die Tiefe sie braucht.

4. 4

   Auf einem Smartphone testen

   Prüf, ob es auf einem Mittelklasse-Smartphone flüssig scrollt und auf iOS Safari nichts springt.

5. 5

   Reduzierte Bewegung einschalten und erneut prüfen

   Fordere in den Bedienungshilfen deines Systems reduzierte Bewegung an und bestätige, dass die Seite ruhig und vollständig ist.

Für die Hintergrundebene selbst leistet ein lebendiger Verlauf mehr als ein flacher. Ein Gradiently Mark, mit Pro als nahtloser WebM- oder MP4-Loop exportiert und hinter deinen Hero gesetzt, gibt der Seite eine hintere Ebene, die sich bereits sanft bewegt und nach dem Sichern nur dir gehört. Kombinier das mit Hero-Bereich gestalten und Website-Hero-Hintergründe für die Größen.