Parallax Scrolling
Inhaltsverzeichnis
Definition
Parallax Scrolling ist eine spezielle Scroll Technik im Web, die beim Design einer Website verwendet wird, um einen Eindruck von Tiefe zu erzeugen. Die Technik nutzt verschiedene Geschwindigkeiten, mit denen sich Vordergrund und Hintergrundbilder beim Scrollen bewegen, um auf einer zweidimensionalen Website die Illusion von Dreidimensionalität zu schaffen.
Ursprünglich war die Technik unter dem Begriff "Parallaxing" bekannt und ist aus der Multiplane-Kamera-Technik entstanden, die seit den 1930er Jahren für Animationen verwendet wurde. Diese Technik nutzt mehrere Schichten, die als Layer bezeichnet werden. Die Position jeder Schicht wird um einen unterschiedlichen Betrag in der gleichen Richtung geändert. Dadurch werden die Schichten, die sich schneller bewegen, vom Betrachter als näher an der Kamera wahrgenommen. Walt Disney hat das Parallaxing in seinen Filmklassikern wie Schneewittchen, Bambi und Fantasia eingesetzt, um eine Illusion von Bewegung und Tiefe zu erzeugen. Ab den 1980er Jahren wurde die Technik dann in 2D-Computergrafiken und Videospielen vor allem von Arcade genutzt. Seit 2011 wird Parallax Scrolling mit HTML5- und CSS3-Codierung im Web Design eingesetzt, um Nutzer besser einzubinden und das Gesamterlebnis auf einer Website zu verbessern.
Beispiel für die Implementierung des Parallax Effektes mit HTML5 und CSS
Für die Implementierung des Parallax Scroll Effekts in eine Website mit HTML5 und CSS wird beim Design der Website ein Container Element verwendet. Dem Container wird eine Klasse zugewiesen und ein Hintergrundbild mit einer bestimmten Höhe hinzugefügt. Die Eigenschaften der Klasse werden in CSS definiert:
<style>
/* Container Klasse */
.parallax {
/* Hintergrundbild */
background-image: url("parallax.jpg");
/* Festlegen der Bildhöhe */
height: 500px;
/* Erzeugen des Parallax Scrolling Effekts */
background-attachment: fixed;
background-position: center; /* zentriert das Hintergrundbild */
background-repeat: no-repeat; /* verhindert einen Wiederholung des Bildes*/
background-size: cover; /* skaliert das Bild, sodass es den gesamten Container abdeckt */
}
</style>
<body>
<!-- Container Element im HTML Dokument -->
<div class="parallax">
<div>Container mit weiterem Inhalt
</body>
Das Attribut "background-attachment: fixed" erzeugt durch die Fixierung des Hintergrundbildes den Parallax Scroll Effekt. Die anderen Hintergrundeigenschaften werden verwendet, um das Bild zu zentrieren und zu skalieren. Die Höhe des Hintergrundbildes kann alternativ in Prozent angegeben werden.
Der Parallax Scroll Effekt eignet sich nicht für mobile Websites
Der Parallax Scrolling Effekt kann zwar die optische Darstellung der Desktop-Version einer Website enorm aufwerten, allerdings eignet er sich eher weniger für die Anzeige auf mobilen Endgeräten. Aufgrund der deutlich kleineren Bildschirmgrößen der mobilen Geräte sind die Bilder, die bei einem Desktop PC für das Parallax Scroll Design verwendet werden, für diese Geräte häufig zu groß, sowohl hinsichtlich der Abmessungen als auch der Dateigröße. Dies führt wiederum zu längeren Ladezeiten. Mobile Internetnutzer haben jedoch nur eine kurze Aufmerksamkeitsspanne und begrenzte Zeit. Wird eine Website nicht schnell genug geladen, verliert sie daher ihre mobilen Besucher, egal wie ansprechend sie gestaltet ist. Nach durchschnittlich 3 Sekunden Ladezeit wechseln Nutzer zur nächsten Website, wenn die Seite nicht soweit geladen ist, das sie genutzt werden kann.
Da für das Parallax Design erweiterter Code erforderlich ist, kann dies darüber hinaus zu erheblichen Leistungsproblemen auf Smartphones und Tablets führen, zum Beispiel zu "abgehackten" Bewegungen oder sogar zum Absturz der Browser-App des Benutzers. Im Allgemeinen wird daher für eine Website, die mit Parallax Scrolling arbeitet, eine vereinfachte Version für mobile Nutzer bereitgestellt.
Anwendung beim Storytelling im Web
Parallax Scrolling bietet einen linearen und flüssigen Ansatz für das Storytelling, um lebendigere und interaktivere Geschichten im Web zu erzählen. Diese Technik kann auf elegante Weise eine Reihe von einfachen Botschaften vermitteln. Beispielsweise kann die Entstehung eines Produktes vom ersten Entwurf über die Fertigung bis hin zur Anwendung beim Verbraucher mithilfe von Parallax Scrolling optisch ansprechend visualisiert werden.
Storytelling lässt sich in der Regel nicht auf mehreren Unterseiten umsetzen. Ein Besucher wird höchstwahrscheinlich sein Interesse verlieren, wenn er eine Geschichte liest, die über mehrere Seiten aufgeteilt ist. Das Design des Parallax Effekts ermöglicht es dem Nutzer hingegen, die Kontrolle zu übernehmen und die gesamte Geschichte mit seinem eigenen Tempo vom Anfang bis zum Ende zu lesen. Die verschiedenen Ebenen, die unterschiedlich auf das Scrollverhalten der Besucher reagieren, erzeugen ein Gefühl von Tiefe und können sogar mehrere Handlungsstränge enthalten.
Weiterführende Links
- https://t3n.de/news/parallax-scrolling-beispiele-423046/
- https://www.awwwards.com/30-great-websites-with-parallax-scrolling.html
- https://www.creativebloq.com/web-design/parallax-scrolling-1131762
Ähnliche Artikel
| Über den Autor |
 |