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


Preload – was bringts?

Autor*in:


Technologie


Im Laufe der Umsetzung des Grassau-Portals habe ich mich mal mit Preloading im html auseinandergesetzt. Benutzt wird das Ganze, um Resourcen wie z.B. Styles, Fonts etc. effizienter laden zu können und somit die Performance zu verbessern. Der Vorteil gegenüber dem ja inzwischen schon etwas älteren Prefetching ist, dass im Tag ein Type angegeben wird, der …


Beitrag lesen
28
FEB
17

Apple Touch Icons nutzen

Autor*in: Bastian Schwarz


Projekte // Technologie // User Experience & Design


Ich habe mal ein wenig recherchiert und möchte hier das Ergebnis mitteilen. Die Apple Touch Icons können generell benutzt werden um Apps oder Webseiten auf z.B. den Startbildschirm zu pinnen. Ist bei der Webseite dann ein solches Icon hinterlegt wird das „Lesezeichen“ mit ihm hinterlegt und man erhält so einen schönen Wiedererkennungswert. Generell sollten die …


Beitrag lesen
17
OKT
12

Langzeittest Serverpilot.io

Autor*in: Sascha Nützel


Technologie


Nachdem ich privat immer noch einige Server verwalte, wollte ich euch kurz meine seit 1,5 Jahren eingesetzte Verwaltung serverpilot.io kurz vorstellen. Zur Vorgeschichte vor ca. 2 Jahren bemerkte ich mit jedem Update von iMSCP (auch eine Verwaltung um einfach MySQL, FTP Konten, usw. einzurichten), dass immer mehr Ressourcen für diese Aufgabe „verschwendet“ wurden, die Cronjobs …


Beitrag lesen
14
NOV
16

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