Blog

Mit dem heutigen Beitrag möchte ich das Beispiel einer mobilen Navigation abschließen. Nachdem ich letztes mal über die geniale JavaScript-Bibliothek Velocity.js berichtet habe, stelle ich euch heute eine kleine Bibliothek vor, welche beim Scrollen einer Webseite den iPhone typischen "rubber band"-Effekt nachamt. Wie Velocity.js geht auch iScroll den weg mit CSS3 und Hardware  beschleunigten Animationen.

Das HTML Markup

<div class="menu" id="wrapper">
<!-- Menu -->
  <ul>
    <li class="btn-close"><a>x</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Beispiel 1</a></li>
    <li><a href="#">Beispiel 2</a></li>
    <li><a href="#">Beispiel 3</a></li>
    <li><a href="#">Beispiel 4</a></li>
    <li><a href="#">Beispiel 5</a></li>
    <li><a href="#">Beispiel 6</a></li>
    <li><a href="#">Beispiel 7</a></li>
    <li><a href="#">Beispiel 8</a></li>
    <li><a href="#">Beispiel 9</a></li>
    <li><a href="#">Beispiel 10</a></li>
  </ul>
</div>

Das Initialisieren des iScroll Objektes

var myScroll = new IScroll('#wrapper');

Entweder man initialisiert das Objekt am Dokumenten-Footer nachdem das HTML-Markup geladen worden ist, oder man nutzt die .ready()-Funktion von jQuery um das Laden (etwa bei komplexen Webseiten) sicherzustellen.

Und das war es schon, mehr ist für die Grundfunktion von iScroll nicht nötig. Zusätzlich lassen sich Click-Events durchschleifen oder bei bedarf auch Scrollbalken einblenden. Über den gesamten Funktionsumfang könnt ihr euch hier informieren und die kleine Bibliothek runterladen.
Das Beispiel an der mobilen Navigation könnt ihr euch hier anschauen.

Viel Spaß mit der kleinen Bibliothek.