Parallax Scrolling

“Als Parallaxe (…) bezeichnet man die scheinbare Änderung der Position eines Objektes, wenn der Beobachter seine eigene Position verschiebt.” – Wikipedia

Jetzt geistern sie schon seit einigen Jahren im Netz rum, diese Websites, die sich beim Scrollen so toll bewegen. Zu Beginn haben wir noch ganz fasziniert hoch und runter gescrollt, um den Effekt ganz genau zu beobachten und jetzt gibt es sie wie Sand am Meer.

Eine Website mit einem Paralax Scrolling-Verhalten zieht unsere Aufmerksamkeit auf sich, weil sie sich vertraut verhält. Das Paralax Scrolling  folgt oft (und bestenfalls) physikalischen Regeln, die wir bereits aus dem realem Leben kennen.

Verschiedene Elemente scrollen in unterschiedlichen Geschwindigkeiten, damit sich die Position und das Verhältnis der Elemente zueinander verändert, während der Nutzer scrollt. Dinge die im Hintergrund stehen (weiter weg sind), bewegen sich langsamer als Elemente, die im Vordergrund zu sehen sind.

Dieser Effekt ist uns auch aus der Welt der Spiele bekannt. Oftmals ändert der Avatar seine Position auf dem Bildschirm nicht. Um die Illusion einer Fortbewegung zu schaffen, bewegt sich statt dessen der Hintergrund. Hier wird besonders deutlich, dass solche Effekte vor allem für ein rundes Storytelling genutzt werden können.

Obwohl es natürlich erscheint, dass sich Websites verhalten wie Elemente in der realen Welt, ist es im Gegensatz zur realen Welt dennoch nötig, eine Website zu verarbeiten und zu interpretieren. Vor allem für wenig surfende Nutzer ist es oftmals schwierig, sich durch solche Seiten zu navigieren. Sie benötigen Zeit, um sich auf solchen Websites zu orientieren.

Auf der anderen Seite stehen die heavy-user, die es mittlerweile oftmals kalt lässt. Die Aufmerksamkeit hat nachgelassen, denn es macht nicht immer unbedingt Sinn, ein Paralax Scrolling Verhalten auf einer Website zu implementieren. Wird es als bloßer Eye-Catcher genutzt, verliert der Effekt seinen Reiz.

Auf folgende Dinge sollte geachtet werden, wenn eine Website mit Parallax Scrolling erstellt wird:

  • Konzept und Geschichte sinnvoll und sorgfältig ausarbeiten
  • Der Effekt darf dem Nutzer optisch sowie funktional nicht im Weg stehen
  • Die Performance der Website muss gewahrt werden
  • Für wenig leistungsfähige Geräte Alternativen bieten

Die Benefits einer Site mit Parallax Scrolling sind 

  • Unterhaltung (Storytelling)
  • Freude (Joy Of Use)
  • Nutzbarkeit (positive User Experience)

Hier einige gute Beispiele, die uns aufgefallen sind:

Sony – Be moved

Puma – Mobium

Lexus – LS

Spaceneedle

Life Of Pi

Parallax.js

parallax_6

Krystalrae

Dementialab

Apple – New Depths

Apple – Mac Pro