jQuery Plugin für iPhone und mobile Endgeräte.

Den Beschleunigungssensor der mobilen Geräte fand ich so interessant, dass ich aus dem Code Snippet kurzerhand ein jQuery Plugin gemacht habe.

Letztlich ist es ein einfacher Content Slider für responsive Internetseiten mit Hardware accelerated Transitions (-moz-transition, -webkit-transition, -o-transition, transition). Den Wechsel der Bilder löst man durch schütteln des Smartphones oder durch Bewegung nach links oder echts aus. Alternativ kann man auch mit den Fingern swipen oder -auf Desktop Computern- die Maus benutzen.

ios_iPhone-5_portrait-sSollte das Gerät keine Hardware accelerated Transitions untertützen, fällt das Plugin auf Javascript CSS Animationen zurück. Was etwas langsamer ist und nicht ganz so "smooth". Dadurch läuft das ganze aber auch auf älteren Geräten und Browsern.

Der animierte Content kann normal gescrollt werden (wenn eine fixe Höhe benutzt wird) und blockiert nicht das scrollen der Seiten mit den Fingern. Die Container können auch mehrfach verschachtelt werden, also ein Slider innerhalb eines Sliders. Der Dom-Tree wird dabei nicht angetastet. Die Struktur bleibt erhalten. So können jederzeit während der Laufzeit Elemente gelöscht oder hinzugefügt werden. Oder man schaltet noch andere Plugins hinzu.

Stellt man den Slider auf responsive, passen sich Breite und Höhe normal dem bestehenden responsiven Design an. Entweder animiert oder unmittelbar. Je nach Einstellung und dem eigenen CSS.

Zusätzlich kann man das Plugin als mini Framework für CSS Animationen benutzen. Das jQuery Plugin ist dabei gezippt gerade mal 3k klein.

jQuery habe ich nicht ausführlich gestestet, aber jQuery ab Version 1.2 müsste völlig ausreichend sein. Getestet habe ich bis jQuery 1.4 herunter.

Das Plugin benötigt kein zusätzliches CSS und sollte in jeder responsiven Umgebung laufen. Das Layout des Slider muss/kann selbst definiert werden. D.h. man muss selbst etwas Hand anlegen.


Das Plugin und ein paar einfache Demos können hier heruntergeladen werden:


jQuery Plugin Homepage oder ausführlicher direkt auf Github


teile diesen Beitrag

2 Kommentare

  1. Avatar
    Di, Nov 19, 2013

    Super, Danke! Das Plugin sieht sehr vielversprechend aus und ich werde es die Tage mal testen. Super dass es sich auf der responsive Webdesign! Ich finde vor allem für eShops sollte responsive Design ein Standard sein, weil es einfach viel übersichtlicher ist. Ich kann eine Marketing Agentur nicht verstehen, die sowas nicht in einer Marketingberatung erwähnen.

  2. Avatar
    Jörg
    Sa, Nov 30, 2013

    Danke

    Das plugin kommt halt nicht in einem besonders schönen Gewand daher und ist mehr für Webentwickler gedacht, die bestimmte Content Blöcke wechseln wollen, ohne ganze swipe fameworks einbinden zu müssen. Mit der Accelerometer Funktionalität lässt sich sicher etwas anfangen.

    Sobald wieder Zeit ist, werde ich mich auch um ein schönes Äußeres bemühen. Sobald es auf Version 1.0 zugeht.

Diskutiere mit!

 
Kommentar senden