Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

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

8 Reaktionen
gravik.de

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

Antworten
ROP

Funktioniert einwandfrei: iPhone 5, iOS 7 beta 6

Antworten
Roxy

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

Antworten
Micha

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

Antworten
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
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
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
phil

WOW! Super beeindruckend!

Antworten

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