{"id":31632,"date":"2024-11-12T12:39:32","date_gmt":"2024-11-12T12:39:32","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31632"},"modified":"2025-03-18T13:52:21","modified_gmt":"2025-03-18T13:52:21","slug":"Parallax_Scrolling","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/de\/wiki\/Parallax_Scrolling","title":{"rendered":"Parallax Scrolling"},"content":{"rendered":"

Definition<\/span><\/h2>\n
\n
\"Parallax<\/a> <\/p>\n
Abbildung:<\/b> Parallax Scrolling – Autor: Seobility – Lizenz: CC BY-SA 4.0<\/a><\/div>\n<\/div>\n<\/div>\n

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\u00e4t zu schaffen.\n<\/p>\n

Urspr\u00fcnglich war die Technik unter dem Begriff „Parallaxing“ bekannt und ist aus der Multiplane-Kamera-Technik entstanden, die seit den 1930er Jahren f\u00fcr 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\u00e4ndert. Dadurch werden die Schichten, die sich schneller bewegen, vom Betrachter als n\u00e4her 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<\/a>– und CSS3-Codierung im Web Design eingesetzt, um Nutzer besser einzubinden und das Gesamterlebnis auf einer Website zu verbessern.\n<\/p>\n

Beispiel f\u00fcr die Implementierung des Parallax Effektes mit HTML5 und CSS<\/span><\/h2>\n

F\u00fcr 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\u00f6he hinzugef\u00fcgt. Die Eigenschaften der Klasse werden in CSS definiert:\n<\/p>\n

<style>\r\n\/* Container Klasse *\/\r\n.parallax {\r\n\/* Hintergrundbild *\/\r\nbackground-image: url(\"parallax.jpg\");\r\n\r\n\/* Festlegen der Bildh\u00f6he *\/\r\nheight: 500px;\r\n\r\n\/* Erzeugen des Parallax Scrolling Effekts *\/\r\nbackground-attachment: fixed;\r\nbackground-position: center; \/* zentriert das Hintergrundbild *\/\r\nbackground-repeat: no-repeat; \/* verhindert einen Wiederholung des Bildes*\/\r\nbackground-size: cover; \/* skaliert das Bild, sodass es den gesamten Container abdeckt *\/\r\n}\r\n<\/style>\r\n\r\n<body>\r\n\r\n<!-- Container Element im HTML Dokument -->\r\n\r\n<div class=\"parallax\">\r\n<div>Container mit weiterem Inhalt\r\n\r\n<\/body><\/pre>\n
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\u00f6he des Hintergrundbildes kann alternativ in Prozent angegeben werden.\n<\/p>\n
Der Parallax Scroll Effekt eignet sich nicht f\u00fcr mobile Websites<\/span><\/h2>\n
Der Parallax Scrolling Effekt kann zwar die optische Darstellung der Desktop-Version einer Website enorm aufwerten, allerdings eignet er sich eher weniger f\u00fcr die Anzeige auf mobilen Endger\u00e4ten. Aufgrund der deutlich kleineren Bildschirmgr\u00f6\u00dfen der mobilen Ger\u00e4te sind die Bilder, die bei einem Desktop PC f\u00fcr das Parallax Scroll Design verwendet werden, f\u00fcr diese Ger\u00e4te h\u00e4ufig zu gro\u00df, sowohl hinsichtlich der Abmessungen als auch der Dateigr\u00f6\u00dfe. Dies f\u00fchrt wiederum zu l\u00e4ngeren 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\u00e4chsten Website, wenn die Seite nicht soweit geladen ist, das sie genutzt werden kann.\n<\/p>\n
Da f\u00fcr das Parallax Design erweiterter Code erforderlich ist, kann dies dar\u00fcber hinaus zu erheblichen Leistungsproblemen auf Smartphones und Tablets f\u00fchren, zum Beispiel zu „abgehackten“ Bewegungen oder sogar zum Absturz der Browser-App des Benutzers. Im Allgemeinen wird daher f\u00fcr eine Website, die mit Parallax Scrolling arbeitet, eine vereinfachte Version f\u00fcr mobile Nutzer bereitgestellt.\n<\/p>\n
Anwendung beim Storytelling im Web<\/span><\/h2>\n
Parallax Scrolling bietet einen linearen und fl\u00fcssigen Ansatz f\u00fcr das Storytelling, um lebendigere und interaktivere Geschichten im Web zu erz\u00e4hlen. Diese Technik kann auf elegante Weise eine Reihe von einfachen Botschaften vermitteln. Beispielsweise kann die Entstehung eines Produktes vom ersten Entwurf \u00fcber die Fertigung bis hin zur Anwendung beim Verbraucher mithilfe von Parallax Scrolling optisch ansprechend visualisiert werden.\n<\/p>\n
Storytelling l\u00e4sst sich in der Regel nicht auf mehreren Unterseiten umsetzen. Ein Besucher wird h\u00f6chstwahrscheinlich sein Interesse verlieren, wenn er eine Geschichte liest, die \u00fcber mehrere Seiten aufgeteilt ist. Das Design des Parallax Effekts erm\u00f6glicht es dem Nutzer hingegen, die Kontrolle zu \u00fcbernehmen 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\u00fchl von Tiefe und k\u00f6nnen sogar mehrere Handlungsstr\u00e4nge enthalten.\n<\/p>\n
Weiterf\u00fchrende Links<\/span><\/h2>\n