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


Bug in Netbeans 8.0.1 und Lösung

Autor*in: Bastian Schwarz


Technologie


Wie einige mitbekommen haben hatte ich nach dem Update auf Netbeans 8.0.1 kein Autcomplete mehr und auch alle anderen Sachen wie Open Class, Navigation etc. gingen nicht mehr. Heute habe ich endlich eine Lösung gefunden: https://netbeans.org/bugzilla/show_bug.cgi?id=247026 Readers Digest: Offenbar gab es Änderungen wie der Index geschrieben wird, dieser sollte das erkennen und sich neu aufbauen. …


Beitrag lesen
23
SEP
14

Boah, Newsticker sind doch so…. 2016

Autor*in:


Technologie // User Experience & Design


Einige von uns haben sich ja schon die Augen gerieben: Der tot geglaubte Newsticker erhält bei vielen Kunden im Portal wieder Einzug. Leider kam es bei diversen Umsetzungen mit fertigen Tickern in letzter Zeit aber zu einigen Problemen. Problem 1: Responsivität Die Liste an fertigen Tickern im Netz ist lange und die Fähigkeiten der Ticker sind …


Beitrag lesen
29
APR
16

WJAX 2018 – Von Web APIs über Cloud Native bis hin zu Anregungen zur Produktivitätssteigerung

Autor*in: Regina Staller


Technologie // Über den Tellerrand


Ich durfte dieses Jahr wieder die WJAX im Westin Grand in der Hauptstadt Bayerns besuchen. Neben reichlich Verpflegung gab es auch dieses Jahr wieder viele interessante Vorträge. Ich habe die WJAX am Konferenztag besucht und konnte mir aus diversen Vorträgen viele Anregungen und Ideen mitnehmen. Die Sessions, welche ich gewählt habe, waren thematisch sehr unterschiedlich. …


Beitrag lesen
27
NOV
18

Einrichten des GoogleTagManagers

Autor*in:


Technologie


Zum Hintergrund: seit kurzem verwenden wir den GoogleTagManager(GTM) bei den Hörnerdörfern. Ziel ist es die diversen Analytics Accounts die hier verwendet werden (Bolsterlang, Fischen etc.) unter einen Hut zu bringen. Hierzu kann man im Tagmanager Profil Regeln und Tags erstellen, anhand derer das Tracking dann ausgeführt wird (dazu später mehr). Ermöglicht  wird das Ganze über …


Beitrag lesen
26
AUG
14