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

t3n 38

Zauberei fürs Frontend: So erstellt ihr mit ScrollMagic interaktive One-Pager

(Screenshot: janpaepke.github.io)

Einen komplizierten Sachverhalt erklären, ein Produkt präsentieren oder für eine Sache begeistern – kürzer werdende Aufmerksamkeitsspannen machen es schwieriger, komplexe Inhalte zu vermitteln. Mit einem One-Pager lässt sich fast jedes Thema in schmackhafte und leicht bekömmliche Häppchen aufsplitten. Das Plugin ScrollMagic übernimmt bei der Umsetzung eines One-Pagers einen Großteil der Arbeit, sodass man sich voll aufs Storytelling konzentrieren kann.

In der vergangenen Ausgabe haben wir ausführlich über die Möglichkeiten des One-Page-Designs berichtet. Nun stellen wir mit ScrollMagic ein Tool vor, das das Entwickeln von One-Pagern vereinfacht, sodass mehr Zeit für inhaltliche Ideen und Konzeptarbeit bleibt.

Komponenten

Ausgangsbasis ist eine simple Seite, deren Inhalt in mehrere Sektionen unterteilt ist, die nacheinander abgescrollt werden. Eine Sektion hat dabei genau die Höhe des Viewports.

Als erstes benötigt man die aktuelle Version von ScrollMagic, die als Zip-Datei im ScrollMagic-GitHub-Repository bereitsteht. Wer lieber mit dem Package-Manager „bower“ arbeitet, bekommt ScrollMagic auch hier.

In dem heruntergeladenen Paket finden sich alle Beispiele sowie die Dokumentation für das Plugin. Die relevanten Dateien liegen im Ordner /js:

jquery.scrollmagic.js

Das Herzstück des Plugins mit ausführlicher Dokumentation, vorgesehen für die Entwicklungsphase.

jquery.scrollmagic.min.js

Wenn die Entwicklung abgeschlossen ist, spart die Einbindung dieser Alternativversion Dateigröße und verbessert die Performance.

jquery.scrollmagic.debug.js

Die ScrollMagic-Debugging-Erweiterung wird ebenfalls nur während der Entwicklungsphase gebraucht, um zu visualisieren, was wir mit unserem Code machen.

Jetzt fehlen noch die jeweils aktuellen Versionen von jQuery und der Greensock Animation Platform (GSAP). Sie gehören zusammen mit den drei relevanten ScrollMagic-Dateien ins JavaScript-Verzeichnis. Anschließend werden die benötigten Dateien im Head-Bereich unserer HTML-Datei eingebunden:

Einbinden der nötigen Dateien

    <script type="text/javascript" xsrc="js/greensock/TweenMax.min.js"></script>
    <script type="text/javascript" xsrc="js/jquery.min.js"></script>
    <script type="text/javascript" xsrc="js/jquery.scrollmagic.js"></script>
    <script type="text/javascript" xsrc="js/jquery.scrollmagic.debug.js"></script>

Listing 1

Sobald die Entwicklungsphase abgeschlossen ist, kann die Debugging-Datei wieder entfernt und die Core-ScrollMagic-Datei durch die minimierte Version ersetzt werden.

Vor dem eigentlichen Start: Das Basis-Setup

Die grundsätzliche Struktur in ScrollMagic besteht aus einem Controller, dem mehrere Szenen hinzugefügt werden. Der Controller definiert unter anderem den Container, in dem gescrollt wird. Dies kann (wie in unserem Fall) das Browserfenster sein, oder aber auch ein HTML-Element, das per CSS-Overflow als „scroll“ definiert wurde. Er ist auch dafür verantwortlich, den Scroll-Container zu überwachen und alle verknüpften Szenen entsprechend zu aktualisieren. In den einzelnen Szenen wird später jeweils definiert, was an welcher Scroll-Position passieren soll.

Definition des Controllers

<script type="text/javascript">
    $( document ).ready(function() { // warten, bis alle Elemente verfügbar sind
        var controller = new ScrollMagic(); // ScrollMagic-Controller initialisieren
    });
</script>

Listing 2

Bei der Definition des Controllers lassen sich verschiedene Optionen festlegen, beispielsweise die Scroll-Richtung (horizontal/vertikal) oder der Scroll-Container. Wer es genau wissen möchte, findet alle weiteren Optionen in der ausführlichen Dokumentation – für das folgende Beispiel sind die Standardwerte genau richtig.

Bitte beachte unsere Community-Richtlinien

2 Reaktionen
patrick

Ist der Artikel aus der Kiste, oder wieso kommt kurz nach dem Release der Version 2 ein Artikel mit Code für die 1.x Version?

Marcus

Wärd ihr so nett und würdet einem treuen Leser verraten, welches Sharing-Plugin ihr hier nutzt? :)

Gruß
Marcus

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst