Parallax
Datum: Januar 2023
Lesedauer: 5 Minuten
Nach diesem Blogpost verstehst du, was Parallax ist und worauf man bei der Verwendung achten sollte.
Zudem erfährst du, welche Techniken zur Implementierung verwendet werden können.
Was ist Parallax?
Parallax ist eine grafische Technik, bei der verschiedene Elemente auf einer Webseite unterschiedlich schnell oder langsam beim Scrollen bewegt werden, um einen 3D-Effekt zu erzeugen.
Diese Technik wurde in den 1930ern verwendet, um Animationen zu erstellen. In der Grafik sind einzelne Ebenen erkennbar. Je weiter entfernt ein Element wirken soll, desto langsamer muss es sich bewegen.
Die Frontendtechnik existiert seit 2011 und kam sehr in Trend. Die Scroll-Effekte sind heute nicht verschwunden, kommen jedoch in einem subtileren Style vor.
Beispiele
Heutzutage gibt es einige verschiedene Arten, wie der Effekt verwendet wird. Diese Tabelle bietet einen Überblick:
| Kategorie | Links | Bild |
|---|---|---|
| Bildhintergrund (Bekanntestes Parallax Einsatzgebiet) | Fixiert (opens in a new tab); Zoom on Scroll (opens in a new tab) |  |
| Verschiedene Scroll Geschwindigkeiten | Beispiel (opens in a new tab) |  |
| Bild Cutout | https://codepen.io/alexoneal/full/OBqaoe (opens in a new tab) |  |
| Horizontales Scrollen | https://codepen.io/pehaa/full/zYxbxQg (opens in a new tab) |  |
| Layers | Hervorbringen (opens in a new tab); Zusammenstauchen (opens in a new tab) |  |
| Perspektivenveränderung | https://codepen.io/Craaftx/full/yQGpwa (opens in a new tab) |  |
| Tiefen Effekt | https://codepen.io/dazulu/full/VVZrQv (opens in a new tab) |  |
| Bewegung durch Maus | https://codepen.io/caseycallis/full/pwEWxo (opens in a new tab) |  |
Reale Beispiele
Nun haben wir einen guten Überblick über die einzelnen Verwendungsarten. Doch wird diese Spielerei überhaupt von Firmen eingesetzt?
Nachfolgend sind 12 Seiten aufgelistet, welche Parallax implementiert haben. Rechts habe ich jeweils meine Gedanken beim Besuchen der Webseiten notiert.
| Seite | Kategorie | Vorteile | Nachteile |
|---|---|---|---|
| http://everylastdrop.co.uk/ | Story | Gutes Storytelling, visuell vorstellbar, einprägsam | Fakten können nicht leicht wieder gesucht werden, User weiss nicht, wie lange es noch geht, bis er fertig ist |
| https://www.sbs.com.au/theboat/ (opens in a new tab) | Story | Sehr gutes Storytelling, Kapitelübersicht (man kann sich bewegen) | Langes Laden |
| http://2011.beercamp.com/ | Sieht Content von Anfang an | Nicht unterstützend, schlechter leserlich | |
| http://www.mdmoch.com/ | Geschwindigkeit Inhalt & Sections | Beeindruckend für Entwickler | Schwierig, an Informationen zu gelangen, findet sich nicht leicht auf der Seite zurecht, Scrollen ist ungewohnt und nicht sehr angenehm |
| https://antonandirene.com/ (opens in a new tab) | Grafiken Bewegen | Visuell ansprechend | - |
| https://longshotfeatures.com/ (opens in a new tab) | Scroll Direction | Nutzer setzt sich mit der Seite auseinander, Interessantes Verhalten | Kann ungewohnt sein, schreckt möglicherweise ab |
| http://porschevolution.com/#1960s | Sections | Schöner Übergang zwischen Autos -> kann so Modelle vergleichen, bietet Optionen, um den Sound zu deaktivieren | Musik kann stören, wenn man zwei Modelle vergleichen will |
| http://www.feedmusic.com/ | Animationen abspielen | - | Grafiken sind unscharf und lenken vom Text ab, Grafiken sind nicht aussagekräftig, nehmen aber trotzdem viel mehr Platz ein, als der Text |
| https://webflow.com/web-design-art-history?rfsn=1534242.c8be44&utm_source=refersion&utm_medium=affiliate&utm_campaign=1534242.c8be44&subid=cbq-row-1237997992519881500 (opens in a new tab) | Bewegung Inhalt | Grafiken sehr schön eingesetzt | Schwierig, den Überblick zu behalten |
| http://www.firewatchgame.com/ | Layers | Gezielt eingesetzt, stört nicht und lenkt nicht ab, taucht in Welt ein | - |
| https://www.apple.com/iphone-14-pro/ (opens in a new tab) | Video, Text, Grafiken | Gutes Erlebnis beim ersten Mal | Zu viel Bewegung, wenn man nach etwas sucht |
| https://www.moooi.com/en/a-life-extraordinary (opens in a new tab) | 3D Raum | Der User kann sich die Möbel gut vorstellen, 3D Welt wird realistisch übermittelt, Buttons werden angeboten, damit auf das Scrollen verzichtet werden kann | User scrollt eventuell zu weit, Wartezeiten |
Vor- und Nachteile
Vorteile
Bei guter Implementierung kann ein Parallax Effekt folgendes bewirken:
- Aufmerksamkeit des Benutzers auf wichtige Elemente der Webseite lenken
- Benutzererfahrung verbessern
- Webseite visuell ansprechender und interessanter gestalten
- Webseite von anderen abheben -> einzigartig
- Interaktion steigern -> Nutzer bleibt länger auf der Seite und sieht mehr Inhalt
- Kann damit gutes Storytelling betreiben
- Visuell ansprechbar
Nachteile
- Es gibt jedoch auch einige Probleme, die beim Verwenden des Effekts auftreten können:
- Laufzeit der Webseite kann verlangsamt werden, da mehr Ressourcen benötigt werden, um die Animationen zu rendern -> User sieht schwarze Screens/Ladeanimationen
- Es kann für Benutzer mit Bewegungseinschränkungen oder Sehbehinderungen schwierig sein, die Webseite zu nutzen
- Kann zu einer Überladung der Webseite führen und die Benutzererfahrung verschlechtern
- Auf Mobile ist es oft nicht leicht zu bedienen
- Text ist oft unleserlich oder wird ignoriert
- Gutes Timing von Animationen ist schwierig. Viele User wollen nicht auf einen Effekt warten und scrollen schnell, um nach Keywords zu suchen
- Zu viel Bewegung kann unschön für die UX sein
- Nutzer finden Parallax meist nicht sehr beeindruckend
- Banner blindness -> Nutzer haben über Zeit gelernt, solche Bewegungen als "visual noise" zu kategorisieren und ignorieren sie
Technische Umsetzung
Um Parallax zu implementieren, gibt es viele Varianten. Hier sind ein paar Möglichkeiten aufgelistet:
- CSS Styling: Wird in den Beispielen erläutert
- CSS Animationen: Animationen mit Keyframes implementieren
- JS: Man kann den Parallax-Effekt auch mit JavaScript implementieren, indem man das Scroll-Ereignis verwendet, um die Position des Benutzers beim Scrollen zu verfolgen und die Position der Elemente entsprechend anzupassen.
- JS Libraries: https://greensock.com/gsap/ (opens in a new tab)
- jQuery: Es gibt auch viele jQuery-Plugins, die es ermöglichen, den Parallax-Effekt einfach zu implementieren. Ein Beispiel für ein solches Plugin ist
Parallax.js(opens in a new tab). - Video: Mit Videos, welche mithilfe von JS beim Scrollen abgespielt werden, können ebenfalls 3D Effekte erzeugt werden. Apple tut dies immer wieder.
- Vorgefertigten Lösungen: Es gibt auch viele vorgefertigte Lösungen für den Parallax-Effekt, die mit minimalem Aufwand implementiert werden können. Ein Beispiel dafür ist
Skrollr(opens in a new tab).
Fixed Background
Diese Methode gibt es schon am längsten. Hier wird der Hintergrund, meist mit background-attachment:fixed, fixiert.
Hier ein Beispiel: https://codepen.io/k_w/pen/YzjGVEz (opens in a new tab)
Nachteile:
- Auf Mobile funktioniert dies nicht einwandfrei
- Nur 2 Layers möglich
- Geschwindigkeit beim Scrollen kann nicht angepasst werden
3D Translations
Wenn wir etwas in unserer digitalen Welt bewegen, gibt es ähnliche körperliche Effekte wie in der Realität. Die z-Achse kann genutzt werden, um die Scroll-Geschwindigkeit von Dingen zu kontrollieren.
Was weiter entfernt ist (negative Translation auf der z-Achse), bewegt sich langsamer.
Was näher ist (positive Translation auf der z-Achse), schneller.
transform: translateZ(-1px);
Hier ein Beispiel: https://codepen.io/k_w/pen/LYBRyPX (opens in a new tab)
Fazit
Durch eine gute Implementierung des Parallax-Effekts kann eine Webseite herausstechen und dem Besucher im Kopf bleiben. Jedoch gilt bei der Implementierung folgendes zu beachten:
- Am sinnvollsten ist es Parallax da zu nutzen, wo Nutzer nicht ein klares Ziel verfolgen
- Die Seite wird langsamer
- Animationen sollten in der Regel nicht überraschend sein
- Der Content muss priorisiert werden
- Eine Navigation ist meistens hilfreich
- Nachdem die Seite komplett gescrolled wurde, sollten die Effekte nicht erneut getriggered werden, sondern in der finalen Position bleiben
- Auf Mobile sollte man die Effekte minimieren
- Es ist sinnvoll, eine Option zur Deaktivierung der Effekte anzubieten (motion sickness)
- Scroll-Behavior nicht verändern -> Unnatürliches Scrollen macht die Bedienung sehr unangenehm
Es gibt immer noch Einsatzgebiete für diese Technologe. Man sollte diesen Effekt aber nicht nur einbauen, weil die Implementierung herausfordernd ist. Denn normale Besucher wissen und schätzen das meist nicht.