Es gibt Millionen Webseiten da draußen. Wie schafft es deine, ihre Besucher zu begeistern?
Eine Möglichkeit ist es, den sogenannten Parallax-Effekt einzusetzen. Die „Nike Better World“-Kampagne aus dem Jahr 2011 gilt als eines der ersten Beispiele einer Parallax-Webseite. Seitdem erfreut sich Parallax-Scrolling großer Beliebtheit bei Unternehmen, die ihren Webseiten-Besuchern ein immersives Erlebnis bieten möchten, das über das reine Scrollen hinausgeht.
Mithilfe des sogenannten Parallax-Effektes kannst du ein Phänomen der räumlichen Wahrnehmung des Menschen so für dich nutzen, dass einzelne Objekte auf deiner Webseite vermeintlich ihre Position verändern. So sieht es zum Beispiel beim Scrollen so aus, als bewegten sich einzelne Elemente. Dieses Phänomen kannst du dafür nutzen, deine Webseite dynamischer zu gestalten.
Was ist der Parallax-Effekt?
Der Parallax-Effekt ist eine Technik in der Webdesign-Welt, bei der sich der Hintergrund einer Website langsamer als der Vordergrund bewegt und dadurch ein 3D-Effekt entsteht. Das vermittelt einen Eindruck von Tiefe und Dimension und kann so eine Website ansprechender gestalten.
Beim Parallax-Scrolling nimmst du einen (scheinbaren) Geschwindigkeitsunterschied der einzelnen Elemente auf einer Website wahr. Das Phänomen findet häufig Anwendung beim Scrollen oder auch schon beim Bewegen des Cursors.
Bei der sogenannten Bewegungsparallaxe handelt es sich demnach um einen wahrnehmungspsychologischen Effekt. Der Begriff Parallaxe kommt aus dem Altgriechischen und bedeutet so viel wie „Veränderung, Hin- und Herbewegen“.
Wie funktioniert der Parallax-Effekt?
Die Lichtreflexionen von Elementen, welche eine geringere Entfernung zu deinem Standpunkt haben, treffen eher auf die Netzhaut. Somit scheinen sich diese mit einer höheren Geschwindigkeit zu bewegen, als es bei weiter entfernten Objekten der Fall ist. Dies erzeugt eine Tiefenwahrnehmung und konstruiert eine relative Bewegung.
Sitzt du beispielsweise in einem Zug und schaust bei hoher Geschwindigkeit während der Fahrt aus dem Fenster, ziehen die Schilder oder Bäume, welche dir näher gelegen sind, augenscheinlich viel schneller vorbei als Objekte, welche weiter entfernt sind. Die Berge oder Wälder im Hintergrund scheinen sich hingegen viel langsamer zu bewegen. Und betrachtest du die Sonne am Horizont, steht diese beinahe still. All das hängt von deiner Perspektive ab und steht in Relation zu deiner Position.
Wofür kannst du das Parallax-Scrolling einsetzen?
Zunächst fand der Effekt Anwendung in der Spieleindustrie. Um Tiefe zu erzeugen sowie dem Spieler Orientierung zu geben, kommt die Parallaxe vor allem bei 2D-Videospielen zum Einsatz.
Seit einigen Jahren wird der Parallax-Effekt auch für das Webdesign genutzt, um das Nutzungserlebnis der User aufzuwerten. Vor allem wird es für Single-Page-Webseiten, sogenannte OnePager, eingesetzt.
Der Parallax-Effekt kann zum Beispiel für die folgenden Seiten verwendet werden:
- Seiten mit einem hohen Anteil an Call-to-Action-Inhalten
- Webseiten für Werbekampagnen oder Produkteinführungen
- Online-Shops
- Unternehmensvorstellung
- Geschäftsbericht
- Landingpage
- Seiten mit visuellem Storytelling
Durch die Tiefenwahrnehmung kannst du die Aufnahme von Informationen auf deiner Webseite ansprechender und interaktiver für den Besucher gestalten und dadurch ein angenehmes Nutzererlebnis schaffen.
Worauf solltest du beim Einsatz des Parallax-Effektes achten?
Indem du Parallax-Scrolling auf deiner Webseite verwendest, kannst du beim Betrachter ein immersives Nutzungserlebnis erzeugen. Doch aufgepasst: du willst natürlich den Spaß beim Scrollen erhöhen und den Nutzer nicht etwa frustrieren.
Achte deshalb stets auf einen sinnvollen, heißt: sparsamen Einsatz des Parallax-Phänomens. Überladene Webseiten können der Performance deiner Webseite schaden, wenn dies zu einer längeren Ladezeit führt, und somit auch die SEO negativ beeinflussen. Auch fehlende Verlinkungen oder eine fehlerhafte Ausgabe der Elemente in der mobilen Version können hierbei einen nachteiligen Einfluss haben.
Wie kannst du den Parallax-Effekt realisieren?
Das Parallax-Scrolling ist ein Trendthema des Webdesigns. Als Gestaltungsprinzip der Animationstechnik ist es dir möglich, mithilfe von zweidimensionalen Mitteln eine dreidimensionale Wirkung von Bildern und gestalterischen Elementen beim Nutzer zu evozieren.
Hierfür musst du dir lediglich die Erzeugung von optischer Bildtiefe zu Nutze machen und die Elemente auf verschiedenen Ebenen platzieren. Durch die Verschiebung der Ebenen werden Unterschiede in der Räumlichkeit und der Szenerie simuliert. Dadurch erscheinen einige Elemente im Vorder- und andere im Hintergrund und können sich unabhängig voneinander horizontal, vertikal und unterschiedlich schnell bewegen.
Du kannst einfache Animationen für den Parallax-Effekt zum Beispiel mithilfe von Selektoren, CSS oder CSS in Verbindung mit JavaScript umsetzen. Durch die Weiterentwicklungen der Designsprachen Hypertext Markup Language (HTML) und Cascading Style Sheets (CSS) hast du mit HTML5 und CSS3 die Möglichkeit, das Phänomen sogar noch einfacher auf deiner Webseite einzubinden.
Insgesamt kannst du das Parallax-Scrolling mit den folgenden Werkzeugen umsetzen:
- HTML5 und CSS3
- JavaScript
- jQuery
- Spezielle Plugins und Module
Das folgende Video zeigt dir, wie du mithilfe von HTML5 und CSS3 den Parallax-Effekt einfach und mit wenig Skript realisieren kannst:
Außerdem hast du die Möglichkeit, das Phänomen zum Beispiel mithilfe von Webflow ohne Code visuell zu entwickeln:
Beispiele des Parallax-Effektes
Im Folgenden siehst du drei Beispiele für den erfolgreichen Einsatz des Parallax-Effektes.
ToyFight
Durch den Einsatz der Bewegungsparallaxe in Verbindung mit Texten und grafischen Elementen erhältst du einen Überblick über die Personen, welche hinter der Agentur ToyFight stehen. So werden hier alle wichtigen Informationen dargestellt und zugleich attraktiv gestaltet.
Die Goonies
Die Landingpage der Webseite des bekannten Filmes Die Goonies aus den 80er Jahren ist ein Beispiel für einen weniger komplexen Einsatz einer Bewegungsparallaxe. Durch die Anordnung verschiedener Elemente in der Szenerie des Vorder- und Hintergrunds werden dreidimensionale-Effekte kreiert. So wird die felsige Küste von Oregon, an welcher der Film spielt, dynamischer dargestellt und zieht somit die Aufmerksamkeit des Betrachters auf sich.
Jess und Russ
Die Webseite von Jess und Russ bietet ein gutes Beispiel, inwieweit du die Bewegungsparallaxe für dein visuelles Storytelling verwenden kannst. Durch das Scrollen erfährst du Details über das Kennenlernen des Paares. Wer sich hier durch die Seite scrollt, erhält durch den geschickten Einbau von Textbausteinen und bewegten Bildern einen schön gestalteten Einblick in eine Liebesgeschichte.
So oder so ähnlich kannst auch du mit einer einfachen Spielerei das optische Phänomen der Tiefenwahrnehmung für deine Webseite nutzen und eine einmalige User Experience für den Nutzer schaffen.
FAQ
An dieser Stelle möchten wir auf einige Fragen, die im Zusammenhang mit dem Thema Parallax-Effekt häufig gestellt werden, eingehen.
Welche Vorteile hat der Parallax-Effekt?
Der Parallax-Effekt kann dazu beitragen, dass deine Webseite ansprechender und interaktiver wirkt. Zudem kann er helfen, bestimmte Inhalte hervorzuheben und die Nutzerführung zu verbessern.
Hat der Parallax-Effekt auch Nachteile?
Ja, der Parallax-Effekt kann die Ladezeit deiner Webseite erhöhen, wenn er technisch nicht richtig umgesetzt wird. Zudem kann er bei manchen Nutzern Übelkeit oder Schwindel verursachen.
Ist der Parallax-Effekt auch für SEO relevant?
Ja, der Parallax-Effekt kann auch für SEO relevant sein, da er dazu beitragen kann, dass Nutzer länger auf deiner Webseite verweilen und mehr mit ihr interagieren.
Kann der Parallax-Effekt auf mobilen Geräten verwendet werden?
Ja, der Parallax-Effekt kann auch auf mobilen Geräten eingesetzt werden. Allerdings sollte er hierbei sparsamer verwendet werden, um die Ladezeit nicht zu beeinträchtigen.
Steffen Grigori
Steffen Grigori ist fest im modernen Marketing und Vertrieb etabliert und Experte für die Themenbereiche Marketing und Social Media. Als CvD bei acquisa gewinnt er tiefe Einblicke in die sich ständig wechselnden Trends und Best Practices. Sein Ziel ist es, der Marketinggemeinschaft konkreten Mehrwert zu bieten, und er ist stolz darauf, aktiv zur Weiterbildung und zur Steigerung der Fachkompetenz in der Branche beizutragen.
