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


XAMPP: PHPUnit installieren

Autor*in: Stefan Oswald


Technologie


Im Auslieferungszustand funktioniert das in XAMPP installierte PHPUnit nicht, bzw. nicht so wie wir das bei infomax gerne hätten. Folgende Anleitung beschreibt die Einrichtung einer aktuellen PHPUnit-Installation, die mit XAMPP, NetBeans und unserer imx.Platform zusammen arbeitet. PHPUnit lässt sich am besten mittels PEAR installieren. Folgende Datei herunter laden und nach x:xamppphp kopieren: http://pear.php.net/go-pear.phar Sollte die …


Beitrag lesen
05
AUG
13

Grunt concurrent und time-grunt

Autor*in: Florian Müller


Technologie


Gestern Abend bin ich auf einen Artikel gestoßen, welcher sich mit der Optimierung von Grunt Tasks beschäftigt hat. Vieles davon ist schon im Einsatz, aber eins hat dann doch noch gefehlt – die Parallelisierung. Dies habe ich heute morgen testweise bei einem Projekt integriert. Um vergleichbare Ergebnisse zu bekommen, welche unabhängig von anderen Build Tasks des …


Beitrag lesen
29
SEP
16

Mit HeidiSQL per SSH-Tunel auf Live-Systeme verbinden

Autor*in: Stefan Oswald


Technologie


Unsere Produktiv-Systeme akzeptieren aus Sicherheitsgründen keine Verbindungen mit dem MySQL-Server von externen Adressen. Dennoch möchte man manchmal mit einem anderen Tool als phpMyAdmin auf die Datenbanken sehen. Die Lösung hierfür ist ein SSH-Tunnel. Einfacher Hintergrund: Statt auf den normalen MySQL-Port verbinden wir uns über den SSH-Server mit dem Zielsystem. Dort angekommen können wir uns mit …


Beitrag lesen
23
APR
12

GOTO Berlin 2017

Autor*in:


Technologie


Dari und ich durften vom 15. bis 17. November an der GOTO Konferenz in Berlin teilnehmen. TL;DR Bevor ich ein paar Insights zu den einzelnen Themen gebe, hier mein Fazit zur GOTO Berlin: eine Entwickler-Konferenz der Extraklasse! Internationale Top-Speaker und – mit dem BBC direkt am Alexanderplatz – eine ideale Location! Auch aus fachlicher Sicht kann …


Beitrag lesen
21
NOV
17