Aufsetzend auf den Trend der Single-Page-Applications beziehungsweise von One-Page-Scrollern hat Pete R. das jQuery-Plugin „One Page Scroll“ entwickelt. Das Plugin hat in komprimierten Zustand sechs Kilobyte und bietet Swipe-Funktionalität auf mobilen Geräten — zumindest in Grundzügen.

Die Implementierung ist denkbar einfach: „One Page Scroll“ einbinden, einen CSS-Selektor im HTML angeben und darauf achten, dass sich eure einzelnen Slides in einem Section-Tag befinden.

<div id="main">
    <section> Inhalt Slide 1 </section>
    <section> Inhalt Slide 2 </section>
    ...
</div>

Neben der JavaScript-Datei wird auch ein Stylesheet mitgeliefert, das euch schon die Funktionalität der einzelnen Slides zur Verfügung stellt, ihr müsst also nur noch euren Inhalt einfügen und die vorgefertigten Slides mit Hintergrundbildern versehen.

Initialisiert wird das Skript über den zuvor gewählten Selektor. Die Dokumentation ist so übersichtlich wie das Plugin selbst, die einzelnen Parameter werden im Konstruktor erklärt.

$("#main").onepage_scroll({
   sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section
   easing: "ease", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in", "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
   animationTime: 1000, // AnimationTime let you define how long each section takes to animate
   pagination: true, // You can either show or hide the pagination. Toggle true for show, false for hide.
   updateURL: false // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
});

Besonders gut finde ich die Möglichkeit, URLs während der Interaktion aktualisieren (updateURL: true) lassen zu können, somit können einzelne Slides direkt angesprochen werden, was wiederum die Usability für Benutzer erhöht.

Das Plugin bietet aber noch weitere Methoden, um zum Beispiel die Slides über eine Navigation steuern zu können. Mit .moveDown() bzw. .moveUp() könnt ihr eure Benutzer mit dem Plugin interagieren lassen. Darüber hinaus könnt ihr Parameter wie das Animationtiming oder die Easing-Funktion in CSS3-Manier festlegen.

Obwohl das Plugin recht neu ist, solltet ihr einen Blick darauf werfen. Besonders angenehm ist, dass dieses Plugin ein „Überfahren“ einer Slide verhindert. Das heisst: Solltet ihr an eurem Trackpad zu stark in eine bestimmte Richtung swipen oder euer Mausrad zu stark beschleunigen, werdet ihr trotzdem zu genau dem darüber oder darunter liegenden Slide gebracht. Dieses „Feature“ kann allerdings, in gewissen Webprojekten, auch ein Nachteil sein.

Mobile Geräte werden bis jetzt nur stiefmütterlich unterstützt, denn die Animationen laufen auf mobilen Geräten nicht flüssig und out-of-the-box wird das Plugin nicht responsive geliefert. Das lässt auf Verbesserung hoffen!

Das Plugin hält aber absolut, was es verspricht und im Test gab es keine Probleme. Wer also eine einfache Möglichkeit sucht, eine Landingpage ähnlich der für das iPhone 5s zu erstellen, wird mit diesem Plugin und der Demo zufrieden sein.