Parallax Scrolling – ein cooler Effekt der nicht ganz neu ist

Datum: 17. November 2011
Autor*in: Axel Güldner


Heute wollte ich mal kurz einen Effekt vorstellen, den viele sicher schon mal gesehen haben, ihn toll fanden, aber keine Ahnung hatten wie das eigentlich funktioniert. Das Thema ist Parallax Scrolling, ein Effekt der auf Websites auftritt, wenn verschiedene Hintergrund Ebenen ein unterschiedliches Scrollverhalten aufweisen. Dies wirkt unerwartet und frisch, da dies nicht die gewohnte Art ist, wie eine Website auf das Drehen am Mausrad reagiert. Ein einfaches Beispiel welche diesen schwer zu beschreibenden Effekt zeigt ist http://www.nikebetterworld.com/

Der ursprüngliche Sinn dieser Technik geht auf alte Computerspiele zurück, bei welchem man das Parallax Scrolling dazu nutze, dreidimensionale Tiefe vorzutäuschen indem man sich der Tatsache bediente, das vom Betrachter weiter weg liegende Objekte (Berge am Horizont zum Beispiel) sich scheinbar langsamer von einem weg bewegen als nahe liegende (Bäume am Straßenrand) wen man selbst in Bewegung ist: http://de.wikipedia.org/wiki/Bewegungsparallaxe

Auf Websiten wird dieser Effekt mit verschiedenen Mitteln erreicht. JavaScript ist hierbei natürlich naheliegend und wird auch häufig dafür verwendet (ich habe bisher vor allem beobachtet das absolut positionierte Elemente in Abhängigkeit der aktuellen Scrollposition in Verbindung mit einem variablen Multiplikator verschoben werden). Aber auch mit geschickt eingesetztem CSS lässt sich bereits eine Menge erreichen dank der „fixed“ – Value für den „position“ und den „background-attachment“ Parameter. Background-attachment wurde zum Beispiel auf der oben genannten nike Seite mit verwendet, wenn man hier mal JavaScript deaktiviert, kann man das gut beobachten.

Ich denke das Parallax Scrolling noch ein interessantes Thema werden könnte. Sicher ist es nicht geeignet um es auf ganze Portale anzuwenden. Aber für Kampagnenseiten, Ladingpages oder kreative Startseiten, ist dies sicher ein interessanter Effekt mit dem man mal spielen sollte.

Wer für den Einstieg in das Thema ein bischen Unterstützung möchte, dem sei das jQuery Plugin jParallax empfohlen, welches wir bereits bei Nordhessen eingesetzt haben.

Abschließend habe ich hier noch ein paar einige Beispiele über die ich in letzter Zeit gestolpert bin:
http://www.janploch.de/sehr simpel wenn man mal unter die Haube schaut, aber visuell äußerst beeindruckend
http://www.worldofsocial.com/ Bewegung in Abhängigkeit der Mausposition
http://www.thecombine.org/ einfach aber hübsch illustriert
http://www.digitalhands.net/ Ebenfalls abhängig von der Mausposition. Erzeugt so einen 3D Effekt
http://www.smartusa.com/
http://www.360langstrasse.sf.tv/page/ sehr spannend was Reiseführer angeht


Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


Microsoft Edge

Autor*in: Benjamin Hofmann


Technologie


Mit Windows 10 kommt Microsofts neuer Browser, sein Codename war bisher „Spartan“. Gestern hat Microsoft dem IE-Nachfolger nun einen richtigen Namen gegeben: Microsoft Edge. Neben der Integration von Cortana gibt es die Möglichkeit, Dinge auf Websites zu markieren, zu beschriften und dann direkt mit anderen zu teilen. Interessant ist ebenfalls, dass Microsoft es erlaub Erweiterungen …


Beitrag lesen
30
APR
15

OOP 2015 – Tag 3

Autor*in: Marc Kurzmann


Technologie // Über den Tellerrand


Heute ging’s gleich technisch los mit dem ersten Vortrag über Möglichkeiten zur Vereinfachung von Deployments und Abhängigkeiten zur Laufzeitumgebung. Goßes Problem stellt hier zum Einen die oftmals mühsame Bereitstellung der Laufzeitumgebung dar (insbes. Appserver, wie Tomcat etc.), zum Anderen bringt das eine große Abhängigkeit in den zu verwendenden Bibliotheken mit sich (Servlet-API). Einen interessanten Ansatz …


Beitrag lesen
30
JAN
15

CSS Selectors and Pseudo Selectors and browser support

Autor*in: Benjamin Hofmann


Technologie // User Experience & Design


Eben bin ich auf eine interessante Seite zum Thema Selektoren in CSS gestoßen, die sehr übersichtlich auflistet was geht und was nicht und vor allem in welchen Browsern dies der Fall ist. Leider ist die Seite nicht mehr ganz aktuell, aber für einen schnellen Überblick sollte sie allemal ausreichen. Und mit etwas Glück kommt auch …


Beitrag lesen
17
FEB
12

JavaScript, HTML5 & Angular Days 2016

Autor*in:


Technologie // Über den Tellerrand // User Experience & Design


Einige von uns Portalentwicklern waren im Oktober in Berlin auf den JavaScript, HTML5 & Angular Days 2016. Hier nachträglich noch kurz meine und Bennis Highlights: „Dem Benedikt seine Highlights“ CSS3 Flexbox Der Style „display: flex;“ ist ein unglaublich flexibles und simples Werkzeug, um Responsivität in die kleinsten Module zu bringen. Wo wir heute noch mit Style-Hacks arbeiten, …


Beitrag lesen
28
NOV
16