Parallax Scrolling im Webdesign - inkl. 27 kreative Beispiele

Parallax Scrolling Effekt im Webdesign

Sicherlich ist Ihnen in den vergangenen Jahren die ein oder andere Website mit dem beliebten Parallax Scrolling Effekt begegnet. Der Parallax Scrolling Effekt wird dann sichtbar, sobald man auf einer Webseite scrollt (wer hätte das gedacht ? ). Meistens werden hierfür verschiedene Grafiken auf unterschiedlichen Ebenen eingesetzt, die sich dann während des Scrollens unterschiedlich schnell bewegen. So kann sich beispielsweise ein Hintergrund langsamer bewegen, während sich alle darauf befindlichen Bilder und Grafiken schneller bewegen. Durch den Parallax Effekt erhalten Webseiten mehr Tiefe und es wird mehr Räumlichkeit und Bewegung simuliert. Insgesamt erhält die Website so einen dreidimensionalen Touch.

Parallax Scrolling arbeitet mit der sogenannten Bewegungsparallaxe. Wenn ein Beobachter sich parallel zu zwei Objekten bewegt, erscheinen ihm die Objekte als ob sie sich mit verschiedenen Geschwindigkeiten bewegen. Das nähere Objekt scheint sich schneller zu bewegen, das weiter entfernte Objekt langsamer. Beim Beobachter entsteht durch diesen wahrnehmungspsychologischen Effekt eine besondere Tiefenwahrnehmung, da die Lichtreflexionen des nahen Objektes schneller auf die Netzhaut treffen. Das menschliche Gehirn verarbeitet diese Reize so, dass der abgebildete Raum wie in 3D wahrgenommen wird. So begegnet auch Ihnen der Parallax Effekt im Grunde genommen täglich, beispielsweise, wenn Sie mit dem Auto auf einer Landstraße unterwegs sind. Während sich die Bäume und Straßenschilder direkt am Straßenrand in hohem Tempo an Ihnen vorbeibewegen, scheinen sich die Häuser dahinter langsamer zu bewegen und die Berge hinter diesen Häusern kriechen nur so dahin.

Sehr schön erkennt man den Parallax Effekt an folgender Grafik:

Einsatzmöglichkeiten des Parallax Scrolling Effekts

Häufig sieht man den Parallax Scrolling Effekt auf sogenannten Onepagern – also Webseiten, die ihre Inhalte auf nur einer einzigen Seite präsentieren. Der Parallax Effekt wird dabei oft beim sogenannten “Storytelling” eingesetzt. Die einzelnen Elemente werden also so platziert, dass diese beim Scrollen eine Geschichte erzählen. Durch das visuelle Storytelling sorgt das beim Nutzer für einen sehr hohen Spaßfaktor beim Betrachten und Nutzen der Website. Zudem bleiben Webseiten mit gut umgesetztem Storytelling einem Besucher mit Sicherheit noch lange positiv in Erinnerung.

Der Parallax Scrolling Effekt lässt sich mit etwas Kreativität natürlich unabhängig vom jeweiligen Thema auf einer Website umsetzen. So gibt es in unseren Beispielen weiter unten auch ein Restaurant, welches seine Fischgerichte mittels dem Parallax Effekt hervorragend präsentiert.

Mögliche Probleme beim Einsatz des Parallax Scrolling Effekts

So schön der Effekt auch ist, er bringt leider oft auch viele Nachteile mit sich. Deswegen sollte der Effekt wenn möglich nur sparsam auf einer Website eingesetzt werden. Beim Einsatz des Parallax Effekts über die ganze Seite – bspw. beim Storytelling – sollten viele Punkte beachtet werden.

◾ Im besten Fall sollte Flat-Design genutzt werden…
◾ … denn auch die Ladezeit wird beim Einsatz vieler Bilder und Grafiken natürlich leiden. Die Dateigröße der einzelnen Grafiken sollte daher so klein wie möglich sein. Generell sollten Sie die Ladezeit Ihrer Website beim Einsatz von Parallax sehr gut im Blick behalten. Denn letztendlich nützt Ihnen die tollste Parallax Website nichts, wenn Nutzer die Seite frustriert wieder verlassen.
◾ Sie sollten Ihren Fokus nicht nur auf die tolle visuelle Darstellung legen, sondern darauf achten, dass auch wichtige Informationen bestens an den Nutzer weitergegeben werden. Denn aus diesem Grund hat ein Besucher immerhin Ihre Website überhaupt betreten. Achten Sie auch darauf, dass trotz toller Effekte Nutzer sich intuitiv zurecht finden und keine unnötigen Hürden bei der Kontaktaufnahme oder dem Kauf eines Produktes entstehen.
◾ Insbesondere die Darstellung und Navigation auf dem Touchscreen mobiler Endgeräte kann viele Schwierigkeiten mit sich bringen. Wenn möglich, sollten Sie für die Darstellung auf mobilen Endgeräten also eine alternative Lösung anbieten.
◾ Unerfahrene Internetnutzer könnten sich von zu viel Parallax Effekt überfordert fühlen und die Internetseite irritiert wieder verlassen. Sie sollten sich im Vorfeld also schon Gedanken darüber machen, wer Ihre Zielgruppe ist und ob der Einsatz des Parallax Effekts bei dieser angemessen ist.
◾ Vor allem, wenn Sie den Parallax Effekt für das Storytelling auf einem Onepager einsetzen möchten, kann es schwierig sein, die Seite für Suchmaschinen zu optimieren. Neben der Ladezeit ist auch zu wenig Text und dadurch auch eine geringe interne Verlinkung ein häufiges Problem auf solchen Webseiten.
◾ Generell gilt: viel hilft nicht immer viel. Setzen Sie den Parallax Effekt wirklich nur angemessen und sparsam ein. Auch ein dezenter “Eyecatcher” kann für einen bleibenden “Wow-Effekt” sorgen.

Vertikaler vs. horizontaler Parallax Effekt

Meistens begegnet uns auf Webseiten ein vertikaler Parallax Effekt, aber auch horizontal lässt sich der Effekt wunderbar einsetzen.

Möchtest du deine Website auch zum Leben erwecken?

Gerne unterstützt dich unsere Webdesign Frankfurt Agentur bei der Konzeption und Umsetzung eines ansprechenden Parallax Effektes! Sprich uns einfach unverbindlich an.

Kontakt aufnehmen