Parallax Scrolling: 5 kostenlose Plugins für Webdesigner
Kommentare

Für manche ist es ein Graus, für andere State-of-the-Art Webdesign: Parallax Design.

Zugegeben, artet Parallax Design beziehungsweise das Parallax Scrolling auf einseitigen Websites lediglich in Effekthascherei aus, kann man schon mal einen Hals kriegen. Denn übertreibt man es, ist das Resultat eine unübersichtliche Benutzerführung, die den Besucher abschreckt und vergrault.

Tolle Effekte mit Parallax Scrolling

Ein relativ dezenter, aber umso effektiverer Einsatz von Parallax Scrolling ist die Produktseite des iPhone 5c von Apple. Wie unser Experte Christian Kuhn in seinem Beitrag „Apples neuer Webauftritt ist eine meisterhafte Inszenierung (mit Mängeln)“ bemerkt, benutzt die Apple-Seite „unterhaltsames Parallax Scrolling, das die Aufmerksamkeit immer auf das Produkt lenkt“.

Wer den Effekt gerne selbst einmal ausprobieren möchte, kann sich die folgenden fünf kostenlosen jQuery Parallax Scrolling Plugins anschauen. Die Plugins sind einfach zu benutzen und zu implementieren.

1. Parallax.JS

Das Parallax JavaScript Bibliothek basiert auf HTML und CSS. Jeder <secton> Tag wird zusammen mit jedem Element aus der animate Klasse geparsed, um Parallax-Effekte zu generieren. Eine der Besonderheiten ist unter anderem ein Pause-Feature, das einen Seitenteil für eine zu bestimmende Dauer locked, sprich feststellt. Eine Demonstrationsseite visualisiert die Möglichkeiten. Runterladen kann man Parallax.JS bei Github.

Screenshot: razorfish.github.io

 

2. Scrollorama

Scrollorama ist ein Skript, mit dem sich DOM-ELemente über die Scroll-Position des Webbrowsers animieren lassen. Auf diese Weise kann zum Beispiel ein Tiefeneffekt erzeugt werden. Die Animationen werden dabei erst durch ein Bewegen der Scroll-Leiste abgespielt, sodass es beispielsweise scheint, als würden sich die Inhalte im Scroll-Verlauf nach hinten aus dem Bild schieben. Für jedes Element, das animiert werden soll, muss dabei zunächst ein CSS-Sektor erstellt werden, der an das Plugin übergeben wird, bevor er mit Effekten belegt werden kann. Auch hier gibt es eine Demo und den Quellcode als Zip- oder Tar-Download.

Screenshot:johnpolacek.github.io

 

3. jQuery Scrolldeck Parallax

Bei diesem Design bewegt sich die erste Section zunächst etwas langsamer als die Scrollbewegung des Nutzers, was durch die wechselnde Top Position des Hintergrundes möglich ist, die sich bei jedem Pixel, das nach unten gescrollt wird, anpasst. Eine Demo gibt es hier, die nötigen Codes könnt Ihr über GitHub herunterladen.

Screenshot:johnpolacek.github.io

 

4.Parallax Slider

Wie der Name schon vermuten lässt, handelt es sich bei dem Parallax Slider nicht um ein vertikales Design, sondern um ein horizontales, bei dem man durch ein Verschieben nach rechts oder links den Parallax-Effekt auslöst. Dies eignet sich zum Beispiel für Fotogallerien oder Links zu Artikeln. Die Demo gibt es hier, den Code könnt Ihr auf der Seite der Entwickler kostenlos herunterladen.

Screenshot: tympanus.net

 

5. Parallax Scrolling

Parallax Scrolling ist ein Plugin, bei dem sich der Hintergrund in einer anderen Geschwindigkeit als der Rest der Webseite bewegt. Dadurch entsteht der gewünschte Effekt, der so aussieht, als ob sich unterschiedliche Ebenen übereinander schieben. HTML, CSS und JavaScript Dateien gibt es auch hier bei GitHub. Eine Demo wird Euch hier geboten.

Parallax Scrolling

Screenshot:richardshepherd.com

 

Schlägt Euer Herz für Webdesign, HTML5, JavaScript, jQuery & Co? Dann haben wir einen Konferenz-Tipp für Euch: die WebTech Conference 2013 in München. Hier erwarten Euch Sessions und Workshops von Profis rund um Webtechnologien und Web-Architektur. Bei Anmeldung bis zum 26. September gibt es ein Gratis-Tablet plus 150 Euro Frühbucherrabatt. 

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -