{"id":4797,"date":"2021-11-12T13:38:00","date_gmt":"2021-11-12T12:38:00","guid":{"rendered":"https:\/\/www.sortlist.de\/blog\/?p=4797"},"modified":"2021-11-04T17:49:49","modified_gmt":"2021-11-04T16:49:49","slug":"parallax-scrolling","status":"publish","type":"post","link":"https:\/\/www-de.sortlist-test.com\/blog\/parallax-scrolling\/","title":{"rendered":"Parallax Scrolling: 6 inspirierende Beispiele des Trends"},"content":{"rendered":"\n

Im Bereich Marketing und Webdesign<\/strong> scheint die Kreativit\u00e4t kein Ende zu haben. Immer gibt es neue Ideen, die Aufmerksamkeit der Nutzer zu erreichen. Einer der neuesten Trends liegt im Parallax<\/strong> Scrolling<\/strong>. Bei dieser Technik wird durch das Scrollen durch die Website ein dreidimensionaler Eindruck <\/strong>vermittelt.<\/p>\n\n\n\n

Dieser Effekt entsteht dadurch, dass sich einige Elemente der Website schneller bewegen als die Hintergrundbilder. Ein besonders beliebtes Anwendungsgebiet f\u00fcr das Parallax Scrolling ist das Storytelling<\/strong>, da die Animationen, Bilder und Grafiken durch den sogenannten Parallax-Effekt<\/strong> lebhafter wirken.<\/p>\n\n\n\n

Wir gehen in diesem Artikel etwas mehr in die Tiefe, was es mit Parallax Scrolling auf sich hat und zeigen Ihnen 6 Beispiele <\/strong>dieses spannenden Webdesign-Trends.<\/p>\n\n\n\n

Das Geheimnis hinter dem Parallax Effekt<\/h2>\n\n\n\n

Der Parallax-Effekt oder auch Parallaxeneffekt<\/strong> genannt, basiert auf der Bewegungsparallaxe<\/strong>. Dabei handelt es sich um ein Ph\u00e4nomen der Wahrnehmungspsychologie<\/strong>. Sie beschreibt die optische T\u00e4uschung, dass sich ein Objekt zu bewegen scheint, wenn der Beobachter seinen Blickwinkel \u00e4ndert.<\/p>\n\n\n\n

Zum einfachen Verst\u00e4ndnis soll ein kurzes Beispiel dienen. Fokussieren Sie einen in Ihrer N\u00e4he befindlichen Gegenstand. Schlie\u00dfen Sie nun abwechselnd Ihr linkes und rechtes Auge, ohne den Blick vom Gegenstand abzulassen. Die geringf\u00fcgig ver\u00e4nderte Perspektive<\/strong> l\u00e4sst es so aussehen, als w\u00fcrde sich das Objekt hin und her bewegen.<\/p>\n\n\n\n

Ein \u00e4hnliches Ph\u00e4nomen ist bei Zugfahrten zu beobachten. Lassen Sie Ihren Blick aus dem Fenster in die Ferne gleiten, wirkt es so, als w\u00fcrde die weit entfernte Landschaft langsamer an Ihnen vorbeiziehen als n\u00e4here Objekte. Alles eine Frage der Perspektive<\/strong>.<\/p>\n\n\n\n

Der Parallax-Effekt hat bereits vor einiger Zeit Einzug in die virtuelle Welt gefunden. Zun\u00e4chst wurde das Benutzererlebnis f\u00fcr Gamer<\/strong> verbessert, bis der Trend auch im Webdesign<\/a> angewendet wurde, um dem Betrachter die Inhalte noch intensiver<\/strong> nahezubringen.<\/p>\n\n\n\n

Parallax Scrolling im Webdesign<\/h2>\n\n\n\n

Der Parallax Scrolling-Effekt wird insbesondere bei Webseiten eingesetzt, bei denen es keine Unterseiten<\/strong> gibt. Der gesamte Inhalt ist also auf einer Seite dargestellt, durch die der Nutzer durchscrollen kann. H\u00e4ufig soll dem Betrachter gem\u00e4\u00df des Storytellings<\/a> durch das intensive, dreidimensionale Erleben eine Geschichte<\/strong> nahegebracht werden.<\/p>\n\n\n\n

Wie funktioniert das?<\/h3>\n\n\n\n

Um Tiefe in eine Website zu bringen, werden ein Background Image<\/strong>, diverse Animationen<\/a> oder andere Bildelemente (sogenannte Parallax-Bilder<\/strong>) im Vordergrund sowie ein Fixpunkt untergebracht. Letzteres stellt f\u00fcr den Betrachter den Fokus dar, was beispielsweise der Text sein kann, der die Geschichte erz\u00e4hlt.<\/p>\n\n\n\n

Wie der Name bereits verr\u00e4t, bewegt sich der Fixpunkt nicht oder nur sehr geringf\u00fcgig. Ansonsten w\u00fcrde vermutlich zu viel Chaos bei den Betrachtenden entstehen. \u00dcblicherweise bewegt sich der Hintergrund deutlich langsamer als die davor gesetzten Bildelemente.<\/p>\n\n\n\n

Durch die verschiedenen Geschwindigkeiten entsteht der 3D-Effekt<\/strong>. Bez\u00fcglich der Bewegungen k\u00f6nnen unterschiedliche Methoden wie Slides<\/strong> oder Fade-in und Fade-out<\/strong> verwendet werden.<\/p>\n\n\n\n

Parallax-Effekt: Vor- und Nachteile beim Webdesign<\/h2>\n\n\n\n

Die Vorteile von Parallax Scrolling liegen auf der Hand. Anstatt eine starre, langweilige Website vor sich zu haben, taucht der Nutzer durch den Parallax-Effekt<\/strong> nahezu in die dargebotenen Inhalte hinein.<\/p>\n\n\n\n

Die Bewegung, die Dreidimensionalit\u00e4t ist f\u00fcr die Betrachtenden etwas Neues. Die Aufmerksamkeit wird auf die Website gezogen und der Inhalt mit Spa\u00df aufgenommen.<\/p>\n\n\n\n

Der positive Aspekt bei einem besonderen Benutzererlebnis<\/a> ist, dass dieses l\u00e4nger im Ged\u00e4chtnis bleibt. Die Wahrscheinlichkeit ist somit gr\u00f6\u00dfer, dass die Inhalte beim Kunden abgespeichert werden und ein Wiederbesuch der Website<\/strong> realistisch ist.<\/p>\n\n\n\n

Nachteilig ist, dass sich diese Methode nicht f\u00fcr mobile Websites<\/strong> eignet. Im Verh\u00e4ltnis zu den kleineren Bildschirmen und der geringeren Rechenleistung sind die Bildelemente, die f\u00fcr das Parallax Scrolling ben\u00f6tigt werden, zu gro\u00df. Die Folge w\u00e4re eine deutlich geringere Page Speed<\/a> und wir wissen schlie\u00dflich alle, wie nervig langsame Ladezeiten sein k\u00f6nnen.<\/p>\n\n\n\n

Auch bei der herk\u00f6mmlichen Website m\u00fcssen eine Reihe von Aspekten f\u00fcr die Umsetzung von Parallex Scrolling<\/strong> beachtet werden, damit ein reibungsloser Ablauf gew\u00e4hrleistet werden kann.<\/p>\n\n\n\n

Was muss bei der Umsetzung von Parallax Scrolling beachtet werden?<\/h2>\n\n\n\n

Parallax Scrolling kann einen bleibenden Eindruck<\/strong> bei den Nutzenden hinterlassen. Damit dieser aber auch positiv bleibt und keinen negativen Beigeschmack tr\u00e4gt, gibt es f\u00fcr die Umsetzung einige Aspekte zu beachten.<\/p>\n\n\n\n

Wir haben Ihnen die wichtigsten Stichpunkte zusammengetragen, die es zu ber\u00fccksichtigen gibt:<\/p>\n\n\n\n