Parallax.js: JavaScript-Bibliothek reagiert auf Smartphone- und Tablet-Neigung
JavaScript-Librarys, die Parallax-Scrolling-Effekte bieten, gibt es mittlerweile einige. Die Bibliothek Parallax.js des Londoner Entwickler Matthew Wagerfield aber bietet einen ganz besonderen Clou – die Library arbeitet auch mit den Gyroskopdaten von Smartphones und Tablets. So lässt sich durch Neigen und Wenden des Geräts Einfluss auf die Elemente der Seite nehmen, was in Kombination mit der Bewegungsparallaxe zu beeindruckenden Resultaten führt.
Parallax.js: Gyroskop manipuliert das Blickfeld
Parallax.js: Parallax-Scrolling nicht nur für mobile Endgeräte. (Screenshot: Parallax.js)
Um dies zu demonstrieren, hat der Entwickler und Designer gleich eine wunderschön gestaltete Demo-Page für Parallax.js kreiert. Hier führt jede Neigung des Tablets oder Smartphones zu faszinierenden Bewegungseffekten. Die Seite soll übrigens auf einem iPad am besten wirken, jedoch funktioniert sie auch auf anderen Geräten mit modernem Browser und integriertem Gyroskop. Auch auf Desktop macht die Seite eine gute Figur. Hier orientieren sich die Animationen an den Bewegungen des Cursors. Nicht ganz so spannend, aber immer noch eine Augenweide.
Vorausschauenderweise stellte Wagerfield die Funktionalität auch als Plug-in für jQuery und Zepto zur Verfügung. Seine Parallax-Library selbst steht unter der MIT-Lizenz und kann auf GitHub runtergeladen werden. Einzig die etwas generische Bezeichnung der Library, die durchaus zu Verwechslungen führen könnte, dürfte man dem selbsternannten Katzenfreund anlasten.
Parallax.js: Parallax-Scrolling an sich ist nichts Neues
Parallax-Scrolling ist vor allem in Computerspielen seit langer Zeit ein gebräuchliches Element. Dabei wird ein Effekt ausgenutzt, der dafür sorgt, dass wir beispielsweise beim Blick aus einem fahrenden Auto den Eindruck haben, dass sich ein weiter entferntes Objekt langsamer bewegt, als eines das näher am Auge ist. Im letzten Jahr wurde Parallax-Scrolling dann endgültig auch zu einem Webdesign-Trend.