Parallax Effekt im Webdesign: Sinnvoll oder riskant für Performance und Barrierefreiheit?

Der Parallax Effekt erzeugt Tiefe, indem Hintergrund und Vordergrund beim Scrollen unterschiedlich schnell laufen. An der richtigen Stelle gibt er einer Seite Bewegung und Charakter. Allerdings macht ein schlecht gebauter Effekt die Seite langsam, ruckelt auf dem Smartphone und kann bewegungsempfindlichen Besuchern Schwindel bereiten. In diesem Leitfaden zeigen wir, Talha Aslan und Team, Schritt für Schritt die Entscheidungen aus unseren Projekten.

Der Begriff stammt zunächst aus der Astronomie. Ein nahes Objekt scheint sich schneller zu verschieben als ein fernes. Im Webdesign ahmen wir dasselbe Prinzip nach. Zum Beispiel gleitet ein Bergfoto langsam nach oben, während die Überschrift davor normal mitscrollt. Dadurch erkennt das Auge auf einem flachen Bildschirm zwei getrennte Ebenen.

Passt das also zu jeder Website? Nach unserer Erfahrung nicht. Auf einer Landingpage, die eine Markengeschichte erzählt, kann der Effekt gut funktionieren. Andererseits lenkt er auf Seiten mit Produktlisten, Preisvergleichen oder Terminbuchungen meist ab. Entscheiden Sie deshalb nach der Aufgabe der Seite, nicht nach der Schönheit des Effekts.

Wie funktioniert ein Parallax Effekt technisch?

Technisch sehen wir zwei Grundansätze. Zunächst gibt es einen Ebenenaufbau, der nur mit CSS arbeitet. Daneben gibt es Lösungen, die das Scrollereignis per JavaScript abfragen und die Position jeder Ebene in jedem Frame neu berechnen. Kosten und Risiko unterscheiden sich deutlich.

• Fester Hintergrund: Das Hintergrundbild bleibt stehen, während der Inhalt läuft. Die Umsetzung ist einfach. Allerdings verhalten sich manche mobilen Browser dabei unzuverlässig.
• CSS Perspektive: Die Ebenen liegen in einer dreidimensionalen Szene auf verschiedenen Tiefen. Der Browser berechnet die Bewegung selbst, deshalb wirkt sie meist flüssiger.
• JavaScript Scrollabfrage: Ein Skript aktualisiert die Ebenen bei jedem Scrollereignis. Das ist flexibel. Zudem belastet es allerdings den Hauptthread und birgt das höchste Risiko für Ruckeln.
• Scrollgebundene Animationen: Neuere Browserfunktionen koppeln eine Animation direkt an den Scrollfortschritt. Prüfen Sie die aktuelle Unterstützung in der offiziellen Browserdokumentation.

Egal welche Methode Sie wählen, die Grundregel bleibt gleich. Bewegen Sie Elemente nur über Eigenschaften, die der Browser günstig berechnen kann. Dazu kommen wir im Abschnitt zur Performance.

Wie nehmen Besucher Parallax Bewegung wahr?

Zunächst ist der erste Eindruck meist positiv. Bewegung zieht den Blick an, und die Seite wirkt durchdacht. Allerdings kippt dieses Gefühl schnell in Ungeduld, sobald der Besucher eine Aufgabe erledigen will.

Die Nielsen Norman Group beschreibt in ihrem Artikel What Parallax Lacks, dass der Effekt visuelles Interesse schafft, aber oft Probleme wie langsames Laden oder schwer lesbare Inhalte verursacht. Laut derselben Quelle zählt vor allem, ob Nutzer ihre Aufgabe leicht und schnell erledigen. Unsere Beobachtungen aus Kundenprojekten decken sich damit.

Nehmen wir ein Beispielszenario. Eine Möbelmarke nutzt auf der Startseite fünf getrennte Parallax Abschnitte. Besucher müssen also weit scrollen, bis sie die Aktion finden. Somit steht die Bewegung vor der Botschaft, statt sie zu tragen. Außerdem rettet der Effekt kein schwaches Scrollerlebnis; mehr dazu lesen Sie in unserem Beitrag zum Scrolling im Webdesign.

Wann hilft Parallax wirklich?

Die passenden Fälle sind begrenzt, trotzdem gibt es sie. Sie haben eine Gemeinsamkeit: Der Besucher kommt wegen eines Gefühls oder einer Geschichte, nicht wegen einer schnellen Transaktion.

• Onepager, die eine Markengeschichte Abschnitt für Abschnitt erzählen.
• Produktstarts, bei denen Sie Ebenen oder Bauteile eines Produkts zeigen möchten.
• Branchen, in denen Atmosphäre Teil des Verkaufs ist, etwa Architektur, Tourismus oder Veranstaltungen.
• Ein einzelner Herobereich ganz oben auf der Startseite, direkt gefolgt von ruhigem Inhalt.

Erkennen Sie das Muster? Der Effekt bleibt immer auf einen einzigen Fokuspunkt begrenzt. Daher empfehlen wir den Ansatz "ein Moment darf glänzen" statt "jeder Abschnitt bewegt sich". Dieselbe Zurückhaltung gilt für kleine Bewegungen in der Oberfläche; unser Artikel über Mikroanimationen im Webdesign zeigt diese Balance mit Beispielen.

Auf welchen Seiten sollten Sie auf Parallax verzichten?

Auf manchen Seitentypen bringt Bewegung fast nichts, kostet aber viel. Deshalb lohnt sie sich dort nicht. Hier raten wir Ihnen, den Effekt gar nicht erst einzuplanen.

• Checkout und Warenkorb: Besucher suchen hier Vertrauen und Klarheit. Bewegung stört die Konzentration.
• Formulare und Buchungsmasken: Felder, die sich scheinbar verschieben, erhöhen das Risiko von Eingabefehlern.
• Lange Ratgeber und Blogartikel: Bewegung unterbricht den Lesefluss.
• Produktlisten und Filter: Nutzer überfliegen schnell, und Bewegung im Hintergrund erzeugt Unruhe.
• Hilfeseiten: Hier landen meist Menschen mit einem Problem und wenig Geduld.

Das heißt, die Regel ist einfach. Wenn eine Seite einer Aufgabe oder Information dient, tritt Bewegung in den Hintergrund. Zudem finden auf genau diesen Seiten oft die Conversions statt. Ein kleiner Fehler dort kostet deshalb weit mehr, als ein beeindruckender Effekt auf einer Schaufensterseite einbringt.

Wie beeinflusst der Parallax Effekt die Performance?

Ein schlecht gebauter Parallax Effekt gehört schnell zu den teuersten Teilen einer Seite. Denn jede Scrollbewegung verlangt vom Browser neue Renderarbeit. Auf dem Smartphone spüren Besucher diese Last noch stärker.

Der Leitfaden von web.dev zu performanten CSS Animationen empfiehlt, nur transform und opacity zu animieren. Außerdem rät er, Eigenschaften zu meiden, die Layout oder Paint auslösen, sofern sie nicht wirklich nötig sind. Diese beiden Eigenschaften kann der Browser auf dem Compositor verarbeiten, ohne den Hauptthread zu belasten.

Konkret sehen wir einen Fehler immer wieder. Ein Entwickler verschiebt die Ebene über top oder margin. Dann berechnet der Browser das Layout in jedem Frame neu. Eine Verschiebung mit translate liefert dagegen dasselbe Bild zu deutlich geringeren Kosten.

Bilder sind der zweite große Kostenfaktor. Parallax Bereiche nutzen meist bildschirmfüllende, hochaufgelöste Fotos. Laden diese Fotos unkomprimiert, dauert der erste Seitenaufbau länger. Deshalb verkleinern wir jedes Parallax Bild auf die nötige Größe und wandeln es in ein modernes Format um.

Schadet Parallax den Core Web Vitals?

Nicht zwangsläufig. Allerdings kann eine schwache Umsetzung alle drei Messwerte gleichzeitig treffen. Die Grundlagen erklären wir in unserem Beitrag zu den Core Web Vitals; hier geht es nur um den Bezug zu Parallax.

• LCP (Largest Contentful Paint): Das große Bild im Parallax Herobereich ist oft das größte Element der Seite. Eine schwere Datei verschlechtert diesen Wert direkt.
• CLS (Cumulative Layout Shift): Reservieren Sie die Bildhöhe nicht, springt der Inhalt nach unten, sobald das Bild erscheint.
• INP (Interaction to Next Paint): Hält eine Scrollabfrage den Hauptthread beschäftigt, reagiert die Seite träge auf Tippen und Klicken.

Die gute Nachricht: Laut der CLS Dokumentation von web.dev können Sie mit transform Elemente animieren, ohne Layoutverschiebungen auszulösen. Somit verschlechtert ein sauber gebauter Parallax Bereich den CLS Wert nicht von selbst. Weitere Ursachen finden Sie in unserem Artikel Was ist Cumulative Layout Shift.

Welches Risiko besteht für bewegungsempfindliche Besucher?

Vor allem dieser Punkt ist wichtig, und viele Designer übersehen ihn. Manche Menschen reagieren körperlich auf großflächige Bewegung am Bildschirm. Vor allem Menschen mit vestibulären Störungen, also Störungen des Gleichgewichtsorgans im Innenohr, gehören dazu.

Die Erläuterung des W3C zu WCAG 2.3.3 nennt Schwindel, Übelkeit und Kopfschmerzen als mögliche Reaktionen. Zudem führt sie Parallax Scrolling ausdrücklich als Beispiel an und beschreibt es als oft nicht wesentlich. Anders gesagt: Es geht nicht nur um Geschmack, sondern direkt um Barrierefreiheit.

Ein Beispielszenario: Eine bewegungsempfindliche Besucherin hat im Betriebssystem die Option für reduzierte Bewegung aktiviert. Ihre Website ignoriert diese Einstellung und schiebt weiter eine große Hintergrundebene. Die Besucherin schließt den Tab nach wenigen Sekunden. Schlimmer noch, Ihre Analyse zeigt das nur als gewöhnlichen Absprung, sodass Sie den Grund nie erfahren.

Deshalb behandeln wir einen Ausschalter für Bewegung als festen Bestandteil des Designs, nicht als nettes Extra.

Was genau verlangt WCAG 2.3.3?

Das Kriterium 2.3.3 heißt "Animation from Interactions" und gehört zur Stufe AAA. Sein Kern lautet: Durch Interaktion ausgelöste Bewegungsanimation lässt sich abschalten, sofern sie für Funktion oder Information nicht wesentlich ist.

Stufe AAA geht über die Stufe AA hinaus, die viele Organisationen anstreben. Trotzdem sollten Sie das Kriterium nicht ignorieren. Aus unserer Sicht sollte jede Website mit Parallax es erfüllen. Denn die Lösung ist einfach und günstig.

Das W3C nennt dafür mehrere Techniken. Konkret prüft eine davon die Präferenz für reduzierte Bewegung per Medienabfrage in CSS. Eine weitere liest dieselbe Präferenz in JavaScript aus. Außerdem gilt eine Einstellung auf der Website selbst, mit der Nutzer Animationen stoppen, als allgemeine Technik.

Was zählt also als wesentliche Bewegung? Das W3C meint damit Bewegung, deren Entfernen die Information oder Funktion des Inhalts grundlegend verändern würde. Parallax erfüllt diese Definition fast nie. Den größeren Rahmen fassen wir in unserem Beitrag zur barrierefreien Website zusammen.

Wie respektieren Sie die Einstellung für reduzierte Bewegung?

Browser geben die Einstellung des Betriebssystems als Medienabfrage an Websites weiter. Die MDN Referenz zu dieser Medienabfrage erklärt, dass sie zwei Werte kennt: keine Präferenz und reduzieren.

In der Praxis gehen Sie in dieser Reihenfolge vor. Zunächst bauen Sie ein ruhiges, statisches Standarddesign. Danach fügen Sie die Parallax Ebene nur hinzu, wenn der Nutzer keine Reduzierung wünscht. So sieht eine Besucherin mit aktivierter Einstellung automatisch eine ruhige Seite.

1. Gestalten Sie die statische Version des Parallax Bereichs und lassen Sie sie freigeben.
2. Aktivieren Sie Bewegung nur für Nutzer ohne Präferenz.
3. Lesen Sie bei JavaScript Effekten dieselbe Präferenz aus und starten Sie die Scrollabfrage dann gar nicht erst.
4. Ergänzen Sie bei Bedarf eine sichtbare Schaltfläche "Bewegung anhalten".
5. Aktivieren Sie die Einstellung auf Ihrem eigenen Gerät und testen Sie das Ergebnis wirklich.

Laut MDN finden Nutzer die Einstellung unter macOS, Windows, iOS und Android in den Optionen zur Bedienungshilfe. Da sich Menünamen mit jeder Version ändern können, prüfen Sie den genauen Pfad bitte in der aktuellen Hilfe Ihres Geräts.

Wie verhält sich der Parallax Effekt auf dem Smartphone?

Ein Parallax Effekt kann am Desktop flüssig laufen und sich auf dem Smartphone trotzdem völlig anders verhalten. Mobile Browser optimieren das Scrollen auf eigene Weise. Deshalb funktionieren manche Techniken, etwa ein fester Hintergrund, auf bestimmten Geräten gar nicht oder flackern.

Zudem bereitet die Bildschirmgröße Probleme. Ein Bild, das am Desktop eine weite Landschaft zeigt, beschneidet der schmale Bildschirm, und die Aussage geht verloren. Zudem blendet sich die Adressleiste beim Scrollen ein und aus, wodurch sich die sichtbare Höhe ändert. Folglich springen Ebenen an unerwartete Stellen.

Unser praktischer Rat lautet daher: Schalten Sie den Effekt mobil ab oder nutzen Sie eine deutlich leichtere Variante. Die Denkweise dahinter erklären wir im Beitrag Was ist Mobile First Design. Danach können Sie die Seite schnell mit unserem Test zur Mobilfreundlichkeit prüfen.

Denken Sie außerdem daran, dass vermutlich ein großer Teil Ihrer Besucher mobil kommt. Prüfen Sie die Geräteverteilung in Ihrer eigenen Analyse, damit diese Entscheidung auf Daten beruht.

Schadet der Parallax Effekt der SEO?

Der Parallax Effekt allein führt zu keiner Abstrafung im Ranking. Allerdings kann er die Sichtbarkeit in der Suche indirekt beeinflussen. Das Problem liegt meist in der gewählten Struktur, nicht im Effekt selbst.

Das erste Risiko ist der Onepager. Packen Sie alle Leistungen auf eine lange Parallax Seite, können Sie nicht für jede Leistung eine eigene Suchanfrage ansprechen. Zweitens gibt es das Risiko von Texten im Bild. Steht eine Überschrift als Teil eines Fotos auf der Seite, kann die Suchmaschine sie nicht lesen.

Das dritte Risiko ist die Abhängigkeit von JavaScript. Erscheint Inhalt erst, nachdem ein Scrollskript läuft, kann es beim Crawlen und Rendern hapern. Hier hilft unser Beitrag zu JavaScript und Ladezeit. Kurz gesagt: Liefern Sie Inhalte immer als einfaches HTML aus und legen Sie Bewegung nur als Schicht darüber.

Was unterscheidet Parallax von Scrolljacking?

Viele verwechseln diese beiden Begriffe, dennoch unterscheiden sie sich stark. Parallax bewegt Ebenen unterschiedlich schnell, ohne die Scrollgeschwindigkeit des Nutzers zu verändern. Scrolljacking dagegen nimmt dem Nutzer die Kontrolle über das Scrollen.

Auf einer Seite mit Scrolljacking springt man mit einer einzigen Drehung am Mausrad zwangsweise in den nächsten Abschnitt. Oder das Scrollen stoppt, bis eine Animation endet. Besucher spüren dann, dass die Website die Seite steuert und nicht sie selbst. Auch die Nielsen Norman Group bewertet solches Kapern des Scrollens als Problem für die Nutzbarkeit.

Unsere Regel ist deshalb klar. Parallax dürfen Sie nutzen, Scrolljacking nicht. Tempo, Richtung und Haltepunkt des Scrollens bleiben immer beim Besucher. Zum Beispiel verpasst jemand, der mit Tastatur oder Screenreader unterwegs ist, auf einer gekaperten Seite womöglich ganze Abschnitte.

Wie schneiden die Parallax Techniken im Vergleich ab?

Die folgende Tabelle vergleicht die Methoden, die uns in der Praxis am häufigsten begegnen. Die Bewertungen spiegeln allgemeine Tendenzen aus unserer Praxiserfahrung wider. Sie sind keine Garantie für jedes Projekt.

Die letzte Zeile haben wir zudem bewusst ergänzt. Manchmal ist das beste Parallax nämlich das, das Sie nie veröffentlichen. Eine ähnliche Wirkung erzielen Sie auch mit einem starken Foto, kräftiger Typografie und klarer Hierarchie.

Wie planen Sie ein zurückhaltendes Parallax Design?

Zurückhaltung heißt, den Effekt an den Rand des Designs zu stellen, nicht in die Mitte. Wir beginnen die Planung immer mit einer Frage: Welche Botschaft stärkt diese Bewegung? Gibt es keine Antwort, lassen wir den Effekt weg.

Danach setzen wir Grenzen. Zunächst nutzen wir pro Seite höchstens ein oder zwei Parallax Bereiche. Den Geschwindigkeitsunterschied zwischen den Ebenen halten wir klein, denn große Abstände ermüden die Augen und erhöhen das Risiko von Übelkeit. Text setzen wir außerdem auf eine stabile Fläche, nicht auf die bewegte Ebene.

Ebenso wichtig ist der Kontrast. Weißer Text über einem bewegten Foto wird unlesbar, sobald ein heller Bildteil dahinter gleitet. Legen Sie deshalb eine halbtransparente Fläche oder einen Farbblock hinter den Text.

Am günstigsten treffen Sie all diese Entscheidungen auf einmal, schon in der Designphase. Wir bauen Parallax Bereiche auf Ihrer Website samt Prüfung von Performance und Barrierefreiheit; für den Umfang können Sie über unsere Leistung Webdesign ein Angebot anfragen.

Wie bereiten Sie Bilder für einen Parallax Bereich vor?

Die Bildvorbereitung ist der am häufigsten vernachlässigte Schritt bei Parallax. Dabei entscheidet sie maßgeblich, wie schnell die Seite erscheint. Da sich die Ebene bewegt, muss das Bild etwas größer sein als der sichtbare Bereich. Halten Sie diesen Spielraum allerdings klein.

• Passende Größe: Exportieren Sie das Bild in der Breite, die der Bildschirm wirklich braucht. Eine riesige Datei im Browser zu verkleinern verschwendet Daten.
• Mehrere Varianten: Liefern Sie eigene Größen für Desktop, Tablet und Smartphone. Dann wählt der Browser die passende Datei.
• Modernes Format: Wandeln Sie Fotos in Formate mit effizienterer Kompression um.
• Bildaufbau: Halten Sie das Hauptmotiv nahe der Mitte. So bleibt die Aussage auch beim Beschnitt auf schmalen Bildschirmen erhalten.
• Reservierte Höhe: Legen Sie die Höhe des Bereichs vorab fest, damit der Inhalt beim Laden des Bildes nicht springt.

Laden Sie außerdem das Herobild nicht verzögert. Es erscheint meist im ersten Bildschirm und ist das größte Inhaltselement. Parallax Bereiche weiter unten dürfen Sie dagegen verzögert laden. Somit laden zu Beginn nur die Dateien, die tatsächlich sichtbar sind.

Wie schnell sollten sich Parallax Ebenen bewegen?

Der Geschwindigkeitsunterschied bestimmt Schönheit und Risiko des Effekts zugleich. Ein größerer Abstand zwischen den Ebenen erzeugt mehr Tiefe. Allerdings steigen im selben Maß Augenbelastung und Unwohlsein.

In der Praxis zielen wir auf Bewegung, die man bemerkt, ohne sie zu beobachten. Besucher sollen den Effekt nicht bewusst verfolgen. Stattdessen sollen sie nur spüren, dass die Seite lebt. Zum Beispiel darf die Hintergrundebene etwas langsamer laufen als der Vordergrund; sie sollte sich aber nicht gegenläufig oder sehr schnell bewegen.

Auch die Beiträge der Nielsen Norman Group zu Animationen deuten auf diese Balance hin. Zu schnelle Bewegung ist schwer zu verfolgen und kann Schwindel auslösen, zu langsame wirkt dagegen wie eine Verzögerung. Daher gibt es keinen einzigen richtigen Wert. Sie finden ihn, indem Sie im eigenen Design testen und den Effekt einigen Personen zeigen.

Noch ein Tipp: Bewegen Sie auf demselben Bildschirm nicht mehrere Ebenen in verschiedene Richtungen. Zwei Bewegungen gleichzeitig teilen die Aufmerksamkeit und erhöhen das Risiko von Unwohlsein.

Wie wirkt sich der Parallax Effekt auf die Conversion Rate aus?

Der Parallax Effekt erhöht oder senkt Conversions nicht von selbst. Entscheidend ist, ob er den Besucher näher an das Ziel bringt. Deshalb raten wir, die Wirkung auf Ihrer eigenen Website zu messen, statt einer pauschalen Zahl zu vertrauen.

Ein Beispielszenario: Auf einer Landingpage schiebt ein Parallax Bereich die Angebotsschaltfläche unter den ersten Bildschirm. Besucher müssen lange scrollen, um sie zu sehen. In diesem Fall sieht der Effekt gut aus, verlängert aber den Weg zur Conversion. Bleibt die Schaltfläche dagegen im ersten Bildschirm und läuft der Effekt nur sanft im Hintergrund, sinkt das Risiko.

Eine einfache Messung können Sie selbst aufsetzen. Zunächst legen Sie zwei Varianten fest, eine mit und eine ohne Effekt. Dann teilen Sie den Traffic im selben Zeitraum auf und vergleichen die Klicks auf das Ziel. Schließlich werten Sie Desktop und Smartphone getrennt aus. So beruht Ihre Entscheidung auf Daten statt auf Geschmack.

Worüber sollten sich Designer und Entwickler einigen?

Viele Probleme mit Parallax entstehen aus einer Lücke zwischen Design und Entwicklung. Denn eine statische Designdatei zeigt keine Bewegung. Daher muss der Designer die Absicht in Worten oder mit einem kurzen Prototyp erklären.

1. Halten Sie schriftlich fest, welche Ebene sich in welche Richtung und ungefähr wie weit bewegt.
2. Gestalten Sie einen eigenen Bildschirm, der die Seite mit reduzierter Bewegung zeigt.
3. Klären Sie vorab, ob der Effekt mobil abgeschaltet bleibt.
4. Vereinbaren Sie eine akzeptable Performancegrenze, etwa Ihre Zielwerte für die Messungen.
5. Planen Sie vor dem Livegang eine gemeinsame Testrunde.

Diese fünf Punkte verhindern weitgehend den Satz "so hatte ich mir das nicht vorgestellt" am Projektende. Zudem werden Korrekturschleifen kürzer, weil alle auf dasselbe Ziel schauen.

Wie testen Sie einen Parallax Abschnitt richtig?

Nur ein Test zeigt also, ob der Effekt wirklich funktioniert. Was auf Ihrem leistungsstarken Rechner flüssig wirkt, kann auf einem Smartphone der Mittelklasse ruckeln. Testen Sie deshalb unter möglichst realen Bedingungen.

1. Auf echten Geräten scrollen: Scrollen Sie mindestens auf einem Android Gerät der Mittelklasse und einem iPhone durch die Seite.
2. Entwicklertools öffnen: Beobachten Sie Paintbereiche und verlorene Frames. Laut web.dev machen diese Werkzeuge Layout und Neuzeichnen sichtbar.
3. Reduzierte Bewegung aktivieren: Prüfen Sie, ob der Effekt vollständig stoppt und alle Inhalte sichtbar bleiben.
4. Mit der Tastatur navigieren: Achten Sie beim Tabben darauf, dass das fokussierte Element stets sichtbar bleibt.
5. Langsame Verbindung simulieren: Stellen Sie sicher, dass die Seite nicht springt, während das große Bild lädt.
6. Felddaten beobachten: Verfolgen Sie nach dem Livegang LCP, CLS und INP in echten Nutzerdaten.

Ein Beispielszenario: Im Test bemerken Sie, dass der Effekt auf einem Smartphone der Mittelklasse deutlich ruckelt. Dann ist es meist klüger, ihn mobil abzuschalten, als ihn mühsam zu reparieren.

Welche Alternativen zu Parallax gibt es?

Es gibt außerdem leichtere Wege, Tiefe und Bewegung zu erzeugen. Oft vermitteln sie dasselbe Gefühl mit weniger Risiko.

• Sanftes Einblenden: Ein kurzer Übergang der Deckkraft, wenn ein Abschnitt in den sichtbaren Bereich kommt. Weil er kurz ist und nur einmal läuft, stört er weniger.
• Geschichtete, aber ruhige Komposition: Schatten, Überlappungen und Größenunterschiede erzeugen Tiefe ohne Bewegung.
• Vom Nutzer gestartetes Video: Ein kurzer Clip, der erst auf Klick abspielt.
• Starke Typografie und Weißraum: Eine gute Hierarchie hinterlässt einen nachhaltigeren Eindruck als Bewegung.

Auch bei diesen Alternativen sollten Sie die Einstellung für reduzierte Bewegung respektieren. Lösen Sie außerdem Einblendungen nicht immer wieder aus, während jemand liest. So bleibt die Seite lebendig, ohne Besucher zu ermüden.

Was gehört auf eine Checkliste für Parallax?

Vor dem Livegang empfehlen wir, die folgende Liste Punkt für Punkt abzuhaken. Lautet auch nur eine Antwort "nein", überdenken Sie den Effekt.

• Stärkt der Effekt die Hauptbotschaft der Seite, oder ist er nur Dekoration?
• Handelt es sich nicht um eine Aufgaben oder Informationsseite?
• Hat die Seite höchstens ein oder zwei Parallax Bereiche?
• Läuft die Bewegung nur über transform und opacity?
• Sind die Bilder verkleinert, komprimiert und mit reservierter Höhe versehen?
• Stoppt der Effekt vollständig, wenn reduzierte Bewegung aktiv ist?
• Ist der Effekt mobil aus oder deutlich leichter?
• Steht Text immer auf einer stabilen Fläche mit genug Kontrast?
• Erscheint der gesamte Inhalt als HTML, auch wenn JavaScript ausfällt?
• Bleibt die Kontrolle über das Scrollen immer beim Nutzer?

Die Liste wirkt kurz. In der Praxis fängt sie allerdings die meisten Probleme vor dem Livegang ab. Außerdem sorgt sie dafür, dass Design, Entwicklung und Redaktion dieselbe Sprache sprechen.

Nutzen Sie die Liste nicht nur einmal. Gehen Sie dieselben Punkte zum Beispiel erneut durch, wenn Sie einen Abschnitt ergänzen oder das Theme aktualisieren. Denn eine kleine Codeänderung kann einen bisher fehlerfreien Effekt unbemerkt beschädigen. Regelmäßige Kontrollen sind daher der günstigste Weg, solche Überraschungen früh zu erkennen.

Sollten Sie Parallax also einsetzen?

Zusammengefasst ist unsere Antwort ein bedingtes Ja. Ein Parallax Effekt verleiht Ihrer Marke Charakter, wenn er in einem erzählenden Schaufensterbereich sitzt, sich maßvoll bewegt und abschaltbar ist. Auf Aufgaben, Informations oder Hilfeseiten lohnt er sich dagegen selten.

In unseren Projekten entscheiden wir das immer Seite für Seite. Einen Effekt, der zur Startseite passt, übertragen wir nicht auf die Kontaktseite. Zudem beobachten wir jeden neuen Effekt einige Wochen nach dem Livegang und vereinfachen ihn sofort, wenn sich die Messwerte verschlechtern.

Konzentrieren Sie sich bei der Entscheidung auf drei Fragen. Stärkt die Bewegung die Botschaft? Läuft die Seite auf dem Smartphone flüssig? Kann eine bewegungsempfindliche Person den Effekt abschalten? Lauten alle drei Antworten ja, können Sie ihn guten Gewissens nutzen. Andernfalls funktioniert ein ruhiges Design meist besser.

Wünschen Sie ein Design, das Struktur, Performance und Barrierefreiheit gemeinsam betrachtet, unterstützt Sie unser Team gern. Für Ihren Projektumfang und ein Angebot besuchen Sie unsere Seite zum Webdesign.