201107Feb

jQuery: Kleines Tutorial für Parallax-Effekt

Als Parallaxe bezeichnet man die scheinbare Änderung der Position eines Objektes, wenn der Beobachter seine eigene Position verschiebt. Der allgemeinen Definition von Wikipedia ist nichts hinzuzufügen. Durch eine Parallaxe wird der räumliche Eindruck einer Szenerie verstärkt — dieser Effekt wird beispielsweise sehr oft in zweidimensionalen Arcade-Spielen eingesetzt, um die Tiefe einer Landschaft im Hintergrund zu simulieren.
Für jQuery gibt es bereits ein sehr schönes Plugin namens jParallax, mit dem sich der Effekt auf Grafiken im Browserfenster anwenden lässt. Wer die Theorie hinter dem Effekt verstehen will, kann sich nun auch das Tutorial von Franck Maurin ansehen.

Franck Maurin - The parallax effects with jQuery

In dem kleinen Artikel wird die Vorgehensweise beschrieben und veranschaulicht. Der Effekt ist wirklich sehr kompakt und kann einfach in einen eigenem Plugin umgesetzt werden. Während bei jParallax die verschiedenen Ebenen durch Mausbewegungen verschoben werden, wird der Parallax-Effekt in dem Tutorial durch das Scrollen der Seite erzeugt. So wird die Grafik im Hintergrund nach oben und das Bild im Vordergrund entsprechend nach unten bewegt, um die räumliche Tiefe zu simulieren.

RSS-Feed abonnieren