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


Embedded JavaScript

Autor*in: Benjamin Hofmann


Technologie


Dank Christian Heindl bin ich auf EJS aufmerksam geworden, einer Template-Engine für Javascript, die Smarty gar nicht so unähnlich ist. Damit ist es ein leichtes HTML in Javascript zu bauen und auch wiederzuverwenden. Aktuell habe ich das in der Karte von NÖW so eingebaut, wo unter anderem die Infowindows durch diese Logik generiert werden. Das Schöne …


Beitrag lesen
07
NOV
14

OOP 2014 – Martin Fowler: „Not just code monkeys“

Autor*in: Marc Kurzmann


Technologie // Über den Tellerrand


Ein Thema, welches mir persönlich sehr am Herzen liegt: jeder sollte sich seiner sozialen/ethischen Verantwortung bewusst sein. Dazu passt der Vortrag von Martin Fowler auf der OOP 2014. „Einer der Keynote-Speaker war Martin Fowler. Er hielt einen eindrucksvollen Vortrag, in dem er auch auf die soziale Verantwortung von Software-Entwicklern einging. Seine Botschaft „Not just code …


Beitrag lesen
10
FEB
14

ML Conference 2018

Autor*in: Tobias Pfannkuche


Technologie // Über den Tellerrand


„Your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should.“ Ian Malcolm, Jurassic Park „Machine Learning sucks. It really does.“ Dr. Pieter Buteneers, ML Conference 2018 „Don’t wait for perfection.“ Dr. Ulrich Bodenhausen, ML Conference 2018 Ein Bericht zur ML-Konferenz rund um das Thema Künstliche Intelligenz …


Beitrag lesen
27
JUN
18

Rückblick auf die WJAX 2017 in München

Autor*in: Regina Staller


Technologie


Am 09. Und 10. November dieses Jahres fand die WJAX in München statt und ich durfte zum ersten Mal daran teilnehmen. In diesem Blogartikel werde ich Euch einen kurzen Überblick über die Sessions, an denen ich teilgenommen habe geben. Die Themen der Sessions waren gemischt, es ging um Microservices, Continuous Delivery, Spring 5.0 und Spring …


Beitrag lesen
17
NOV
17