Glossar

Parallax Scrolling

Der Begriff Parallax Scrolling bezeichnet eine Technik, bei welcher beim Webdesign eine Besonderheit der Wahrnehmung von Objekten ausgenutzt wird. Wenn der Mensch sich selbst bewegt, nimmt er dies bei der Passage nahegelegener Objekte als schnellere Bewegung gegenüber den weiter entfernt befindlichen Objekten wahr. Dadurch entsteht subjektiv der Eindruck einer räumlichen Tiefe. Entdeckt wurde dieses Phänomen der Wahrnehmung zu Beginn der für jedermann möglichen Nutzung der Eisenbahn zu Beginn des 19. Jahrhunderts.

Wie kommt das Parallax Scrolling in eine Website?

Die am häufigsten eingesetzte Variante der technischen Umsetzung ist die Layermethode. Alternativen sind die Rastermethode und Spritemethode. Bei der Layermethode werden die einzelnen Elemente einer Website auf verschiedene Ebenen verteilt. Die einzelnen Ebenen werden als Layer bezeichnet. Dabei ist die Umgebung der in jeder Ebene enthaltenen Elemente volltransparent. Die einzige Ausnahme ist der Layer, welcher die Hintergrundebene bildet. Er enthält keine transparenten Bereiche. Die „Bewegungsgeschwindigkeit“ des Betrachters wird von den Bewegungen des Mauszeigers bei Desktop-Computern und von den Fingerwischen bei den touchfähigen Displays der mobilen Endgeräte abgeleitet.

Der Effekt des Parallax Scrolling wird damit erreicht, dass sich die einzelnen Layer mit unterschiedlichen Geschwindigkeiten durch den sichtbaren Bereich einer Grafik bewegen. Dadurch hat der Betrachter den Eindruck, dass ihm die sich am schnellsten bewegenden Objekte näher sind als die Objekte, die sich langsamer durch das Bild bewegen. Der Grund für diese Art der Wahrnehmung ist allerdings nicht allein die Bewegungsgeschwindigkeit. Vielmehr wird der Eindruck der räumlichen Tiefe dadurch erzielt, dass bei der Bewegung der oberen Layer immer wieder Teile der auf den unteren Layern enthaltenen Grafiken verdeckt werden.

Was ist beim Parallax Scrolling bei Websites zu beachten?

Die Ausnutzung für die Gestaltung von Websites begann bereits im Jahr 2008. Drei Jahre später wurde sie zu einem beliebten Trend. Vor allem die Einführung von HTML 5 und CSS in der dritten Version sorgten dafür, dass der Trend weitgehend erhalten blieb. Einer der ersten weltbekannten Anwender dieser Webdesign-Technik war Nike.

Allerdings kann das Parallax Scrolling den Nutzerkomfort einer Website sehr negativ beeinflussen. Das ist vor allem dann der Fall, wenn Grafiken mit sehr hohen Auflösungen verwendet werden. Sie sorgen dafür, dass die Rendering Engines der Browser stark gefordert sind. Dadurch verlängert sich die Zeit zwischen dem Aufruf und der Anzeige einer Website (auch Ladezeit genannt) erheblich. Hier sollte beachtet werden, dass die Ladezeit einer Website eines der wichtigsten Kriterien ist, welche die von Google für das Ranking in den Suchmaschinen verwendeten Algorithmen auswerten. Hinzu kommt, dass lange Ladezeiten außerdem immer eine hohe Absprungrate nach sich ziehen.

Für welche Arten von Websites eignet sich das Parallax Scrolling?

Professionelle Webdesigner empfehlen einen solchen Aufbau einer Website grundsätzlich nur dann, wenn das Prinzip des Storytellings angewendet wird. Dann kann auf Bewegungen der kompletten Layer verzichtet werden. Der räumliche Eindruck entsteht hier durch die Kombination mit sich wiederholenden (und scheinbar bewegenden) oder wechselnden Grafiken im Vordergrund mit komplexen Grafiken im Hintergrund, die sich über den gesamten anzeigbaren Bereich einer Website erstrecken. Dabei werden die Vordergrundgrafiken den in den jeweiligen Textbausteinen angesprochenen Inhalten angepasst. Dadurch entsteht der Eindruck einer wechselnden Szenerie. Die einzelnen Bereiche der Layer werden damit sozusagen zum „Bühnenbild“, welches beim Übergang von einem Kapitel zum nächsten Kapitel durch die Wegnahme und das Hinzufügen von Elementen eine neue Szenerie schafft.


Interessiert? Erfahren Sie mehr zum Thema "Parallax Scrolling" - kontaktieren Sie uns jetzt

We create for You

Unter der Überschrift „Kreation“ vereinen wir die 4 Kernkompetenzen von baseplus®: Das Design, die Entwicklung, das Online Marketing und Print, in der jeweils anmutenden Farbe. Das konsequente Color-Coding dient der optimierten Benutzerführung, die Claims kommunizieren jeden Bereich zusätzlich.

Klicken Sie hier, um zu sehen was wir meinen