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

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.
Bitte beachte unsere Community-Richtlinien
Ja..... sehr coole Seite! Respekt! Gefällt uns!
AntwortenFunktioniert einwandfrei: iPhone 5, iOS 7 beta 6
AntwortenHab es gerade auf dem iPad Mini ausprobiert und sieht sehr geil aus und funktioniert einwandfrei! =D
AntwortenFunktioniert bei mir weder auf dem Iphone noch auf dem Ipad.
Antwortendas demo nutzt Bilder von Hokosai http://commons.wikimedia.org/wiki/File:The_Great_Wave_off_Kanagawa.jpg . Nix schön und toll sondern einfach nur geklaut.
AntwortenDer Browser muss die Bibliothek auch unterstützen bzw. die Funktionen. Mit Chrome funktioniert es. Safari ist da aber noch etwas hintendran.
AntwortenD.h. es liegt nicht am Entwickler, sondern am Browser der Smartphones.
Mh, sieht ja durchaus interessant aus, aber wir haben das gerade auf einem iPhone getestet und es passierte...... Nichts :(
Auf dem Desktop per Maus funktioniert es aber sehr nett.
AntwortenWOW! Super beeindruckend!
Antworten