Parallax Scrolling Tutorials und Beispiele: Webseiten mal anders

Martin Maciej

Wer eine Webseite bauen möchte, die sich von anderen abheben soll, setzt auf Parallax Scrolling. Parallax Scrolling basiert auf dem Prinzip der Bewegungsparallaxe. Bewegt sich ein Objekt in eine Richtung mit einer bestimmten Geschwindigkeit, bewegt sich gleichzeitig ein zweites Objekt mit einer anderen Geschwindigkeit in eine andere Richtung. Auf Webseiten umgesetzt bedeutet dies, dass Grafiken beim Scrollen auf der Webseite ihre Position verändern – dabei allerdings nicht in die vorhersehbare Richtung nach oben und auch nicht in der Scrollgeschwindigkeit.

Parallax Scrolling Tutorials und Beispiele: Webseiten mal anders

Bewegen sich einzelne Abschnitte einer Webseite mit unterschiedlicher Geschwindigkeit, wird beim Leser ein Tiefeneindruck erzeugt, ähnlich wie beim Schauen aus dem Fenster während einer Autofahrt. Hier bewegen sich nahe Objekte scheinbar schneller, als weit entfernte Objekte. Innerhalb des Webdesigns wird dieser Effekt als Parallax Scrolling bezeichnet.

Parallax Scrolling Tutorials: So baut man scrollende Webseiten

Pionier in der Einführung des Parallax Scrollings auf Webseiten ist der US-Sportartikelhersteller Nike, der auf der Webseite von Nikebetterworld 2011 auf parallaxes Scrolling setzte.

Begünstigt wurde der Einsatz des Design-Element durch den Einsatz von HTML 5 und CSS 3, welche neue Möglichkeiten beim Aufbau von Parallax Scrolling-Webseiten boten. Wollt ihr selber Parallax Scrolling-Seiten erstellen, werft ein Blick auf die folgenden Tutorials:

  • PHP-Tagebuch: Im PHP-Tagebuch findet ihr eine umfangreiche und bebilderte Anleitung für das Erstellen von Parallax Scrolling-Effekten. Dabei wird außer jQuery-Framework auf keine weiteren Hilfsmittel zugegriffen.
  • Tympanus: Bei diesem Parallax Scrolling-Tutorial wird erläutert, wie sich mittels CSS3 eine Slideshow samt Parallax-Elementen zusammenstellen lässt.
  • Egstudio: Einsteiger in die parallaxe Materie sollten einen Blick in das Tutorial bei Egstudio werfen. Auch hier wird mit jQuery gearbeitet.
  • Ihatetomates: Im Blog von Petr Tichy findet ihr einige Beispiel-Dateien zum Herunterladen und könnt euch sein Werk in einer Demo anschauen. Alle Schritte zum Erstellen einer Parallax-Website sind hier ausführlich erklärt.

Eindrucksvolle Beispiele für Parallax Scrolling

Ansporn, eure eigene Parallax Scrolling-Webseite zu entwickeln, findet ihr in den folgenden Beispielen:

  • Ala: Das Schweizer Design-Studio nutzt Parallax Scrolling zur Präsentation seiner Projekte
  • Ben The Bodyguard: Dieses Beispiel für Parallax Scrolling führt euch in den Plot zur iOS-App ein
  • Mode im Browser mal anders präsentiert: Manufacturedessai
  • Wie sich die Bewegungsparallaxe eindrucksvoll im Browser präsentieren kann, seht ihr bei iutopi
  • Riksha-Verkehr im Browser: Parallax macht’s möglich
  • Dangerosoffracking zeigt nicht nur, wie Parallax Scrolling eine Webseite optisch aufwerten kann, sondern weist zudem auf die Gefahren des Frackings hin

 

Zu den Kommentaren

Kommentare zu diesem Artikel

Neue Artikel von GIGA SOFTWARE

  • 19 Fonts, die der Albtraum eines jeden Designers sind

    19 Fonts, die der Albtraum eines jeden Designers sind

    Wer Plakate entwirft, braucht auch die passende Schriftart dazu. Im Internet findet man auf Seiten wie „1001fonts“ massig kreative Fonts. Manchen davon sind allerdings so schrecklich, dass jeder Designer Albträume bekommen dürfte. Wir zeigen euch einige davon – viel Spaß.
    Robert Kägler
  • YouTube-Kindersicherung: Sicheren Modus aktivieren und deaktivieren

    YouTube-Kindersicherung: Sicheren Modus aktivieren und deaktivieren

    YouTube-Videos bieten Unterhaltung für ein ganzes Leben, aber manche Filme sind einfach nicht für Kinder geeignet. Aus diesem Grund gibt es auf YouTube den „eingeschränkten Modus“. Diese „YouTube-Kindersicherung“ könnt ihr aktivieren, um Kindern einen einigermaßen sicheren Zugang zu gewähren. Doch Vorsicht – das ist leicht zu umgehen!
    Marco Kratzenberg
  • FileZilla

    FileZilla

    Der FileZilla Download ist ein FTP-Client, der für Windows, Mac OS und Linux verfügbar ist. Das kostenlose FTP-Programm verwaltet beliebig viele FTP-Zugänge und kann abgebrochene Transfers fortsetzen.
    Matthias Großkämper 2
* gesponsorter Link