Webdesign Trends — Parallax Scrolling
Schon seit mindestens 2011 im Web zu finden und Jahre später noch immer voll im Trend: Was ist dran an "Parallax Scrolling" im Webdesign?
zuerst erschienen am 13. Januar 2020
Schon 2011 hat Nike auf einer Webseite das Parallax Scrolling eingesetzt. In unserem einfachen CMS metatag® steht seit 2017 ein entsprechendes Design bereit — das auch unter einfaches-cms.de Einsatz findet.
Dabei wird auf den schon im Altertum bekannten Effekt zurückgegriffen, der die (scheinbar) unterschiedliche Geschwindigkeit naher und ferner Objekte in Bewegung beschreibt. Konkret werden im Web dabei meist Objekte mit einer vom Rest der Webseite unterschiedlichen Scroll-Geschwindigkeit bewegt.
Schneller oder auch langsamer, bis hin zu einem Bild, das scheinbar im Hintergrund "feststeht" und auf das der Betrachter durch eine Art Fenster der Webseite zu blicken scheint.
Bedauerlicherweise funktioniert der Effekt an vielen Mobilgeräten nicht, dort wird das Bild "normal" in der Webseite angezeigt.
Eine gewisse Herausforderung stellt der Einsatz im sog. Responsive Webdesign dar, also der Flexibilität eines Webdesigns, sich an unterschiedliche Ausgabegrößen — vom Smartphone bis hin zum Fernseher — anzupassen.
Entsprechend wird auch nicht einfach nur ein Bild gesetzt, sondern es ist als Hintergrundbild eines div-Tags mit einigen Parametern zu setzten. Diese bestimmen die Scrollgeschwindigkeit (relativ zum Rest der Webseite) und übergeben dem ausführenden Script u.a. noch die Originalgröße des Bildes zum korrekten Skalieren, da dies schneller geht, als die Funktion die Bildgröße auslesen zu lassen.
Ursprünglich war "unser" Parallax Design deswegen nur für Webs vorgesehen, die kaum vom Betreiber selbst bearbeitet oder gar aufgebaut werden. Die Textblöcke über und unter den Parallax-Objekten lassen sich allerdings ganz normal im Editor direkt bearbeiten. Zudem kann die Ausgabe auch über das Katalog-Modul erfolgen, dann ändert man schlicht dort das gewünschte Bild. So haben sich mittlerweile doch immer mehr Kundenwebs gefunden, die auf das Parallax Webdesign setzen
Beispiele von metatag Webs mit Parallax Webdesign
schaller-steuer-recht.de
fugen-center.de
klinger-delikatessen.de
spenglerei-schmid.de
elmar.pics
Dank an den Entwickler
Wir nutzen für das Parallax Design im einfachen CMS metatag den jQuery Code von github.com/pixelcog/parallax.js — und nennen den Entwickler an dieser Stelle gerne, verbunden mit einem herzlichen Dankeschön.