Scrolling Parallax. Animiertes Scrolling mit Tiefgang

von Henry Zeitler

Parallaxe [aus dem Griechischen; für „Veränderung“, „Abweichung“] ist ein Phänomen, das aus verschiedenen Bereichen bekannt ist (z. B. der Astronomie). In der Fotografie wird die Unstimmigkeit zwischen dem Bild im Sucher und dem fotografischen Bild mit einem Parallaxenausgleich behandelt.
Im Webdesign ist Scrolling Parallax bereits vor einiger Zeit angekommen. Ich möchte zu diesem Thema das jQuery-Plugin Scrolling Parallax von Jon Raasch vorstellen – mit einem praktischen Beispiel.

Das Prinzip von Scrolling Parallax

Betrachten wir Beispiele für Scrolling Parallax im Webdesign, so wird die Technik meist eingesetzt, um während des Scrollvorgangs verschiedene Elemente einer Website mit unterschiedlichen Geschwindigkeiten zu animieren. Durch geschickte Verteilung der Geschwindigkeiten ergibt sich ein räumlicher Effekt – Tiefe im Hintergrund.

Das Prinzip lässt sich anhand dieses Beispiels sehr gut verdeutlichen (Quelle: Youtube-Kanal von frederikdebleser).

Beachte die unterschiedliche Animation der Hintergrundebenen

 

Das Plugin

Jon Raasch hat da mal was vorbereitet. Der Freelancer aus Portland hat ein jQuery-Plugin geschrieben, welches die Animation von Elementen oder Hintergrundbildern auf Webseiten denkbar einfach gestaltet. Wie bereits erwähnt handelt es sich um Scrolling Parallax und es steht auf seiner Seite bereit zum Download.

Das Plugin erlaubt die Parallaxe auf vertikaler und horizontaler Achse sowie von links nach rechts, oben nach unten und jeweils in umgekehrter Richtung. Die einzelnen Parameter und ihre Anwendung wurden in der Dokumentation aufgeführt und erklärt.

Die Funktion $.scrollingParallax() wird zusammen mit den notwendigen Parametern aufgerufen. Dabei kann der Effekt auf komplette Elemente angewendet werden.


$(document).ready(function() {
     $('div.foreground').scrollingParallax({
	     enableHorizontal: true,
         staticSpeedX: .06
     });
});

Beispiel einer horizontalen Animation des Div-Containers mit der Klasse .foreground bei niedriger Geschwindigkeit (Faktor 0.06)

Mit der Image-Path-Methode lassen sich einzelne Hintergrundbilder ansprechen, formatieren und animieren. Das sieht dann z. B. so aus:


$.scrollingParallax('img/parallax-background.jpg',{
    bgHeight: '200%',
    reverseDirection : true
});

Beispiel einer vertikalen Animation eines Hintergrundbildes von unten nach oben mit einer Höhe von 200%

 

Mein bescheidenes Beispiel

Das von mir erstellte Beispiel ist grafisch nicht gerade opulent, aber es verdeutlicht die Arbeitsweise und die Möglichkeiten des Plugins ganz gut. Benutzt den Scrollbalken und seht euch den Quelltext an. Die Skripte sollten natürlich ausgelagert werden. Hier geht’s zum Demo auf jsFiddle…

 

Nett, aber sinnvoll?

Scrolling Parallax im Webdesign ist eine nette Spielerei, sollte aber nur gezielt und reduziert eingesetzt werden. Es gibt leider wenig Beispiele für eine sinnvolle Anwendung, ohne dass die Benutzbarkeit und die Performance der Seite beträchtlich darunter leidet. Es macht aber Spaß damit zu experimentieren, soviel muss gesagt werden…

comments powered by Disqus