Parallax Scrolling

Von einigen Vertretern der Zunft wird Parallax Design als ein Übel bezeichnet, andere loben es in den Himmel. Wenn man Parallax Scrolling auf einer simplen Webseite ohne großartige Elemente betrachtet, dann könnte man doch fast zu dem Schluss kommen, es sei nur ein Versuch diese aufzuwerten. So ist es kein Wunder so mancher hier schon einmal die Nase voll hat. Wird das ein Scrolling-Plug-In an der falschen Stelle eingesetzt, erscheint eine Website einfach nur noch unübersichtlich und viele User werden einfach abgeschreckt.

Parallax Scrolling

Parallax Scrolling Plugins, ein wunderbares Designmittel für Entwickler

Eigentlich muss man sich nur an Apple orientieren um einen dezenten aber doch sehr effektiven Ansatz zu betrachten, bei dem Parallax Scrolling zu einem wahren Erfolg wird. Auf der Produktseite des iPhone 5c kann man es bewundern und bemerkt sehr schnell, dass man das Smartphone nie aus dem Auge verliert.

Apple iPhone 5c

Screenshot: Produktseite Apple iPhone 5c

5 kostenlose Parallax Scrolling Plugins

Wenn auch Dein Interesse nun geweckt wurde, kannst du Dir vielleicht die nun folgenden fünf JQuery Prallax Scrolling Plugins ansehen. Sie sind alle Kostenlos und lassen sich sehr einfach in bestehende Websites einbauen.

Parallax.JS

Bei der Parallax JavaScript Bibliothek werden alle Tags zusammen mit einem Element direkt von der animate class aud geparsed. Auf diese Weise werden die entsprechenden Effekte erzeugt. Prallax.JS basiert zur Gänze auf HTML und CSS. Eine besondere Funktion, besteht darin das man bestimmte Bereiche der Seite auf locked setzen kann, so dass das Scrollen hier eine Weile anhält. Auf einer Demoseite kannst du dir die Effektmöglichkeiten im Voraus anschauen. Heruntergeladen werden kann Parallax.JS bei Github.

Scrollorama

Mit Scrollorama, lassen sich sogenannte DOM-Elemente animieren. Dies geschieht über die Position des Scrollbalkens im Browser. Dieses Feature eignet sich hervorragend um Tiefeneffekte zu erzeugen. Durch das bewegen der Scroll-Leiste, werden diese abgespielt und lassen Inhalte so erscheinen, als wenn sie aus dem Hintergrund nach vorn in das Bild geschoben werden. Hierzu ist es nötig, für jeden Bestandteil, welcher auf diese Weise angezeigt werden soll, einen eigenen CSS-Sektor zu erstellen. Er dann kann er an das Plugin weitergereicht und werden. Die Demo findest du auf der Homepage des Plugins und du kannst es als Quellcode direkt herunterladen.

jQuery Scrolldeck Parallax

Hier bewegen sich die ersten Elemente am Anfang etwas langsamer als die eigentliche Scrollbewegung es erwarten lässt. Dieser Effekt wird durch die wechselnde Top Position des Hintergrundes ermöglicht. Bei jedem Pixel, das man nach unter scrollt, wird diese neu angepasst. Den Quellcode kannst du bei Github herunterladen. Demo hier…

Parallax Slider

Hier wird horizontal gescrollt. So wird der Effekt bei einem Verschieben nach links oder rechts ausgelöst. Gerade wer Artikel oder Fotos anzeigen will, profitiert eindeutig von der horizontalen Ausrichtung. Den Quellcode kannst Du auf der Entwicklerseite absolut kostenlos Downloaden. Demo hier…

Parallax Scrolling

Bei diesem Pluginn bewegt sich der Hintergrund mit einer anderen Geschwindigkeit als die übrige Website. So erscheint es als würden sich zwei Ebenen übereinander schieben. Die notwendigen Dateien, können bei Github geladen werden. Demo hier…

author avatar
Hi, ich bin Mika - WordPress-Enthusiast und Webworker aus Leidenschaft. Ich bin Inhaber der Webdesign Agentur / WordPress Agentur Wolkenhart® und freier Dozent an der Dualen Hochschule Baden-Württemberg.