Was sich bereits letztes Jahr abgezeichnet hat, wird uns 2013 noch öfters über den Weg laufen. Die Rede ist von Parallax Scrolling, jene Technik, bei der sich verschiedene Ebenen in unterschiedlichen Geschwindigkeiten bewegen, wenn man über die Webseite scrollt. So lassen sich etwa grafische Elemente wie Wolken oder Vögel im Hintergrund, zeitversetzt animieren. Der dabei entstehende 3D-Effekt verleiht der Seite Tiefe und lädt den Besucher der Seite zum Verweilen ein.

Wir haben uns auf die Suche begeben und drei kostenlose Tutorials gefunden, mit denen Ihr Parallax Scrolling selbst programmieren könnt.

Parallax Backround mit jQuery

Dieses Tutorial von Themeforest.net zeigt Euch Schritt für Schritt, wie Ihr die oben angesprochenen Wolken auf Eurer Webseite zum Leben erwecken könnt. Das besondere an diesem jQuery-basierten Tutorial ist, dass sich die Wolken im Hintergrund horizontal bewegen, während der Besucher aber nach unten, also vertikal scrollt.

Bidquelle Screenshot: Themeforest.net

Fluid CSS3 Slideshow mit Parallax Effekten

Folgendes Tutorial von Tympanus.net zeigt Euch, wie Ihr eine CSS3-basierte Slideshow mit Parallax-Effekten baut. Diese Anleitung hat einen höheren Schwierigkeitsgrad und ist damit eher etwas für Fortgeschrittene. Es werden Radio Buttons and Sibling Combinators verwendet, um anzuzeigen, welche der beiden Slides gerade angezeigt werden.

Bidquelle Screenshot:Tympanus.net

Easy Parallax with jQuery

Der Name des Tutorials verrät es bereits: Easy Parallax Scrolling von Egstudio.biz ist eine jQuery-basierte Einsteiger-Anleitung für Parallax-Scrolling-Neulinge:

Bidquelle Screenshot:Egstudio.biz