Parallax Scrolling Effekt im Webdesign – inkl. 27 kreative Webseiten 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.

Benötigen Sie Unterstützung?

Gerne unterstützt unsere Webdesign Frankfurt Agentur Sie bei der Konzeption und Umsetzung eines ansprechenden Parallax Effektes! Sprechen Sie uns einfach unverbindlich an. Wir betreuen Kunden im gesamten Rhein-Main-Gebiet, z.B. aus Offenbach, Hanau und Wiesbaden.

Tolle Beispiele für einen horizontalen Parallax Effekt:

AO.com

horizontaler Parallax Scrolling

wildnatureinkazan.ru

parallax scrolling

switchwine.com.au

parallax horizontal

mattiecsboy.com

Beispiel horizontaler Parallax

www.drugtreatment.com

Beispiel Parallax horizontal

hotdot.pro

Parallax horizontal effect

 

Weitere Webdesign Beispiele mit kreativem Einsatz des Parallax Effekts:

The Boat (mein absoluter Favorit!)

Parallax Effekt Webdesign

melaniedaveid.com

Parallax Scrolling Effekt

antonandirene.com

Mouse Parallax

restaurantleduc.com

Fisch Parallax Effekt

www.cabletv.com

Parallax Beispiel

makeyourmoneymatter.org

Parallax Scrolling Beispiel

cyclemon.com

Fahrrad Parallax Effekt

benthebodyguard.com

Parallax

www.madwell.com

Parallax Effekt

www.firewatchgame.com

Firewatch Parallax

jonathannicol.com

Parallax Effekt Tutorial

www.ratatattoo.it

Tattoo Parallax Scrolling

www.sweetestevia.gr

Parallax Scrolling

theuniquehorn.com

Parallax Website Design

boy-coy.com

Boy Coy Parallax Scrolling

graphicnovel-hybrid4.peugeot.com

Peugeot Parallax Effekt

www.nytimes.com

nytimes Parallax

gardenestudio.com.br

garden parallax

everylastdrop.co.uk

storytelling parallax scrolling

myriad.space

myriad parallax

islreview.com

space parallax scrolling

Wie gut kennen Sie sich mit Online Marketing aus?

Kostenlose Downloads:

Buyer Persona Workbook

 

SEO Checkliste

 

Erik 4. Oktober 2018