Entwicklung & Design

Parallax.js: JavaScript-Bibliothek reagiert auf Smartphone- und Tablet-Neigung

Parallax.js bringt nicht nur Parallax-Scrolling mit, sondern reagiert auf Tablets und Smartphones auch auf Kippbewegungen. Mit der JavaScript-Library lassen sich so beeindruckende Effekte erzielen.

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: So sieht die Demo aus. (Screenshot: Parallax.js)

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.

via wagerfield.github.io

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

12 Kommentare
phil
phil

WOW! Super beeindruckend!

Antworten
Tarulia
Tarulia

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.

Antworten
Rico Weigand

Der Browser muss die Bibliothek auch unterstützen bzw. die Funktionen. Mit Chrome funktioniert es. Safari ist da aber noch etwas hintendran.
D.h. es liegt nicht am Entwickler, sondern am Browser der Smartphones.

Antworten
nick
nick

das 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.

Antworten
Micha
Micha

Funktioniert bei mir weder auf dem Iphone noch auf dem Ipad.

Antworten
Roxy
Roxy

Hab es gerade auf dem iPad Mini ausprobiert und sieht sehr geil aus und funktioniert einwandfrei! =D

Antworten
ROP
ROP

Funktioniert einwandfrei: iPhone 5, iOS 7 beta 6

Antworten
gravik.de
gravik.de

Ja….. sehr coole Seite! Respekt! Gefällt uns!

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.