# Parallax-Effekt: Tiefe beim Scrollen und im Motion Design

[Canonical HTML page](https://gradiently.design/de/guide/parallax-effect)

Parallax leiht sich einen Trick deiner eigenen Augen: Nahes bewegt sich schneller als Fernes. Sparsam eingesetzt gibt es einer Seite oder einem Loop Tiefe; übertrieben macht es Menschen seekrank. So machst du es richtig.

## The short version

- Ein Parallax-Effekt erzeugt Tiefe, indem er Ebenen unterschiedlich schnell bewegt, wobei nähere Ebenen sich schneller bewegen als entfernte.
- Auf Websites lässt sich Parallax Scrolling heute in CSS mit scrollgesteuerten Animationen bauen, ohne JavaScript, in Browsern, die sie unterstützen.
- Die ältere Technik mit `background-attachment: fixed` wird von iOS Safari ignoriert, deshalb sollte man sich auf Mobilgeräten nicht auf sie verlassen.
- Große oder schnelle Parallax-Bewegung kann bei Menschen mit vestibulären Störungen Unwohlsein auslösen, deshalb sollte sie aus sein, wenn jemand reduzierte Bewegung bevorzugt.
- Dezenter Parallax, bei dem sich Ebenen nur ein wenig bewegen, gibt Tiefe, ohne vom Inhalt abzulenken.

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.

| Ebene | Geschwindigkeit relativ zum Scrollen | Was darauf gehört |
| --- | --- | --- |
| Hintergrund | Am langsamsten, etwa 10 % bis 30 % des Scrollens | Ein Verlauf, Himmel, eine Textur oder ein weiches Farbfeld |
| Mitte | Mittel, etwa die Hälfte | Formen, Fotos, Illustrationen |
| Vordergrund | Normale Scrollgeschwindigkeit | Headlines, Buttons, der eigentliche Inhalt |

Ein einfacher Parallax mit drei Ebenen. Halte den Inhalt auf der Ebene, die normal scrollt, damit das Lesen nie leidet.

> **Text bleibt, wo er ist** Setz nie Fließtext oder Buttons auf eine bewegte Parallax-Ebene. Wörter, die anders schnell gleiten als die Seite, sind anstrengend zu lesen und schwer anzuklicken.

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline) und behandle den Effekt als Zusatz. Ohne Unterstützung bewegt sich die Seite einfach nicht, und das ist in Ordnung.

```css
.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 Hintergrundebene bewegt sich ein wenig, während der Hero durch den Viewport läuft. Sie läuft nur, wo sie unterstützt wird und wo niemand reduzierte Bewegung angefordert hat.

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](https://gradiently.design/de/guide/css-gradient-performance) erklärt, warum große animierte Verläufe sich bewegen und nicht neu zeichnen sollten.

## Andere Wege zu Parallax Scrolling

| Methode | Wie sie funktioniert | Worauf du achten musst |
| --- | --- | --- |
| Scrollgesteuerte Animationen | `animation-timeline: view()` oder `scroll()` bindet Keyframes ans Scrollen | Noch nicht in jedem Browser; als Zusatz bauen |
| `background-attachment: fixed` | Der Hintergrund bleibt stehen, während Inhalt darüber scrollt | Von iOS Safari ignoriert; nur eine feste Geschwindigkeit |
| CSS-3D-Perspektive | Mit `translateZ` nach hinten geschobene Ebenen scrollen langsamer | Fummelige Skalierung und Einrichtung des Scroll-Containers |
| JavaScript beim Scrollen | Ein Skript bewegt Ebenen, während die Seite scrollt | Kann ruckeln, wenn es bei jedem Scroll-Event läuft; `requestAnimationFrame` nutzen |

Vier Techniken. Für eine neue Website sind scrollgesteuerte Animationen die sauberste Wahl.

## 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](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) 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](https://gradiently.design/de/guide/reduced-motion) behandelt die Media Query und wie du sie testest.

### Vermeiden

- Ganze Abschnitte, die unterschiedlich schnell gleiten
- Text oder Buttons auf bewegten Ebenen
- Bewegung, die Einstellungen für reduzierte Bewegung ignoriert
- Scroll-Hijacking, das die Scrollgeschwindigkeit ändert
- Parallax in jedem Abschnitt der Seite

### Machen

- Eine Hintergrundebene, die sich ein wenig bewegt
- Inhalt im normalen Scrollfluss
- Bewegung nur unter `no-preference`
- Natives Scrollen, unangetastet
- Parallax an einer Stelle: meist im Hero

## 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.

Ein breiter Website-Hero mit dem Text Gebaut für lange Wege für eine Outdoor-Marke, mit stehender Schrift über einem langsam bewegten Verlauf

Ein Website-Hero mit Tiefe: Die Hintergrundfläche bewegt sich langsam hinter stehenden Wörtern, sodass das Auge zuerst die Headline liest.

Partikel sind eine natürliche mittlere Ebene: [Partikeleffekte](https://gradiently.design/de/guide/particles-effect) 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](https://gradiently.design/de/guide/motion-design-principles) erklärt, warum.

## Einen Parallax-Hero gestalten, Schritt für Schritt

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. **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. **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. **Auf einem Smartphone testen** Prüf, ob es auf einem Mittelklasse-Smartphone flüssig scrollt und auf iOS Safari nichts springt.
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.

- Ferne Ebene: Nachthimmel: `linear-gradient(180deg, #0c1445 0%, #1e3a8a 50%, #60a5fa 100%)`
- Mittlere Ebene: Horizontglühen: `radial-gradient(ellipse at 50% 100%, #f59e0b 0%, #b45309 35%, #1e3a8a 75%)`
- Nahe Ebene: dunkler Vordergrund: `linear-gradient(180deg, #374151 0%, #111827 55%, #0a0a0a 100%)`

Drei Verlaufsebenen für einen Parallax-Hero. Übereinander gestapelt, mit der fernen Ebene als der am wenigsten bewegten, lesen sie sich als Himmel, Horizont und Vordergrund.

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](https://gradiently.design/de/guide/hero-section-design) und [Website-Hero-Hintergründe](https://gradiently.design/de/guide/website-hero-background) für die Größen.

## FAQ

### Was ist ein Parallax-Effekt?

Eine Art, Tiefe zu erzeugen, indem Ebenen unterschiedlich schnell bewegt werden, sodass nähere Ebenen sich schneller bewegen als entfernte, wie im echten Leben.

### Kann ich einen Parallax-Effekt nur mit CSS bauen?

Ja. Scrollgesteuerte CSS-Animationen binden Keyframes ohne JavaScript an die Scrollposition, in Browsern, die `animation-timeline` unterstützen. Ältere reine CSS-Methoden nutzen `background-attachment: fixed` oder 3D-Perspektive.

### Warum funktioniert background-attachment: fixed nicht auf dem iPhone?

iOS Safari ignoriert feste Hintergründe, deshalb scrollt der Hintergrund normal mit. Nutze stattdessen scrollgesteuerte Animationen oder eine Technik mit transform.

### Ist Parallax Scrolling schlecht für die Barrierefreiheit?

Große, durch Scrollen ausgelöste Bewegung kann Menschen mit vestibulären Störungen Unwohlsein bereiten. Halte sie dezent und schalte sie ab, wenn jemand reduzierte Bewegung bevorzugt.

### Ist Parallax schlecht für die Performance?

Nicht, wenn du `transform` animierst und der Browser es mit scrollgesteuerten Animationen antreibt. Ruckeln entsteht durch Skripte, die Elemente bei jedem Scroll-Event bewegen.