Anzeige
Anzeige
How-To
Artikel merken

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

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.

7 Min. Lesezeit
Anzeige
Anzeige

(Screenshot: janpaepke.github.io)

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Vorhang auf: Die erste Szene erstellen

In der ersten Sektion befindet sich in der unteren Hälfte eine Infobox, die eingeblendet werden soll, sobald sie sich in der Mitte des Viewports befindet. Der „triggerHook“ – die Position in Relation zum Viewport, an dem die Szene auslösen soll – ist standardmäßig „onCenter“, in diesem Fall also genau der gewünschte Wert (Auslösen in der Mitte des Viewports).

Anzeige
Anzeige
Mit ScrollMagic Animationen für One-Pager gestalten: Die Skizze visualisiert die Mechanik dahinter und erklärt, wann die Infobox aus unserem Beispiel sichtbar wird. (Grafik: Jan Paepke)

Mit ScrollMagic Animationen für One-Pager gestalten: Die Skizze visualisiert die Mechanik dahinter und erklärt, wann die Infobox aus unserem Beispiel sichtbar wird. (Grafik: Jan Paepke)

Der Startpunkt der Szene soll der Position der Infobox entsprechen. Mit diesen Vorgaben kann man nun die Szene erstellen und nach der Definition des Controllers einfügen:

Definition der Szene

var scene = new ScrollScene(
    {
        triggerElement: '#infobox' // die Infobox definiert den Startpunkt
    }
);
scene.addTo(controller); // die Szene mit dem Controller verknüpfen
scene.addIndicators(); // Einblenden der Start-Indikatoren (benötigt Debug-Erweiterung)

Listing 3

Nach dem Neuladen der Seite taucht rechts der blaue Indikator für den triggerHook auf. Etwas darunter befindet sich der grüne Indikator für die Startposition der Szene, genau auf der Höhe der Infobox. Beim Scrollen bewegt sich nun der grüne Indikator mit, mehr passiert nicht. Um die Seite zum Leben zu erwecken, braucht es eine Animation. Das Objekt, das die Parameter und den Verlauf einer Animation beschreibt, wird auch „Tween“ genannt. Die folgenden Zeilen definieren einen solchen Tween für die Infobox.

Animation definieren

var fadeTween = TweenMax.from( // .from animiert von bestimmten Werten zu den aktuellen
    '#infobox',   // Ziel der Animation
    0.5,   // Dauer der Animation
    {opacity: 0}  // Was soll animiert werden? (opacity: 0 -> 1 )
);

Listing 4

Nach einem Reload sieht man, wie die Infobox eingeblendet wird. Eigentlich sollte dies aber erst passieren, wenn sie sich in der Mitte des Viewports befindet. Damit das funktioniert, müssen noch Tween und Szene miteinander verknüpft werden. Hierfür verwendet man eine der zentralen ScrollMagic-Methoden: „setTween“.

Anzeige
Anzeige

Animation an Szene binden

scene.setTween(fadeTween);

Listing 5

Scrollt der Nutzer die Seite herunter, erscheint jetzt die Infobox, beim Scrollen nach oben läuft die Animation rückwärts und die Infobox blendet sich wieder aus.

Im Debugging-Modus zeigen verschiedene Indikatoren Hooks und Startpositionen der Szenen an. (Screenshot: ScrollMagic)

Im Debugging-Modus zeigen verschiedene Indikatoren Hooks und Startpositionen der Szenen an. (Screenshot: ScrollMagic)

Tipp: Es hat sich als Best Practice bewährt, immer zuerst den Tween zu erstellen und zu testen, bevor er an eine Szene gebunden wird. So lässt sich leichter herausfinden, warum etwas nicht so aussieht wie geplant. Falls ein Element weiter unten im DOM liegt, kann die TweenMax-‚delay‘-Option genutzt werden, um den Start der Animation zu verzögern.

Wie man sieht, spielt ScrollMagic in diesem Beispiel „nur“ die Rolle des „Triggers“ – definiert also, wann genau eine Animation ausgelöst werden soll. Wie schnell der Nutzer dann am Startpunkt vorbeiscrollt, spielt dabei keine Rolle, da lediglich die Animation gestartet und mit der im Tween definierten Geschwindigkeit abgespielt wird.

Anzeige
Anzeige

Was aber, wenn der Fortschritt der Animation 1:1 an die Scrollbalkenposition gebunden sein soll? Dafür ist es ausreichend, eine Dauer für die Szene zu definieren. Setzt man diese beispielsweise auf 100, wird die Infobox während dieser Scroll-Distanz eingefadet. Die 0,5 Sekunden, die als Dauer des Tweens definiert wurden, werden so außer Kraft gesetzt und auf die 100 Pixel Scrolldistanz projiziert. Scrollt der Nutzer nur 50 Pixel am Start der Szene vorbei und bleibt dort stehen, ist nun die Box zu exakt 50% sichtbar – bis er weiter scrollt.

Man erreicht also durch Festlegen einer Dauer für eine Szene einen direkten Bezug zwischen Scrollposition und Animationsfortschritt – die Scrollbar verhält sich dann genau wie der Playback-Scrub-Controller eines Videoplayers.

Hier noch einmal zusammengefasst der finale Code unseres Animationsbeispiels:

Anzeige
Anzeige

Einfache Animation mit Scrollbar-Bindung

<script type="text/javascript">
    $( document ).ready(function() {
        var controller = new ScrollMagic();
        // was soll passieren
        var fadeTween = TweenMax.from('#infobox', 0.5,  {opacity: 0} );
        // wann und wie soll es passieren
        var scene = new ScrollScene({triggerElement: '#infobox', duration: 100})
           .setTween(fadeTween)
           .addTo(controller);
    });
</script>

Listing 6

Der Übersichtlichkeit halber wurden hier die Indikatoren weggelassen und ScrollMagics Unterstützung des so genannten „method chaining“ ausgenutzt.

Dies ist ein sehr einfaches Beispiel. Da die GSAP verschachtelte Timelines, Callbacks, Wiederholungen, Easing-Funktionen und vieles mehr unterstützt, sind auch komplexere Animationen möglich. Alle Optionen, die sich für eine Szene definieren lassen, sind on-the-fly modifizierbar – welcher Parameter welche Auswirkungen hat, wird am besten deutlich, wenn man einmal im ScrollMagic-Beispiel „Scene Manipulation“ mit den Werten herumspielt.

Navigation animieren

Zudem soll es den Nutzern möglich sein, mit Hilfe eines In-Page-Menüs direkt zu einer bestimmten Sektion der Seite zu springen. Doch da wir gerade so viel Mühe darauf verwendet haben, das Scrollen zu einem Erlebnis zu machen, wäre es schön, wenn die Seite mit einer kleinen Animation an die richtige Stelle scrollt. Dafür bereitet man ein Menü mit Anchor-Tags vor:

Beispiel eines In-Page Menüs

<ul id="menu">
    <li><a href="#section1">Sektion 1</a></li>
    <li><a href="#section2">Sektion 2</a></li>
    <li><a href="#section3">Sektion 3</a></li>
</ul>

Listing 7

Beim Klick auf einen Menüpunkt springt die Seite, wie erwartet, zur Sektion mit der entsprechenden ID – soweit nichts Ungewöhnliches. Damit nun stattdessen eine Animation abgespielt wird, definiert man als Erstes eine alternative Scroll-Funktion für den Controller:

Ändern des Standard-Scrollverhaltens

controller.scrollTo(function (newScrollPos) {
    $("body").animate({scrollTop: newScrollPos});
});

Listing 8

Man kann dafür auch das TweenMax-„ScrollTo“-Plugin oder jede andere Funktion verwenden. Hier kommt die jQuery-animate-Methode zum Einsatz. Von nun an wird immer diese Funktion verwendet, wenn controller.scrollTo aufgerufen wird. Nun muss noch mit Hilfe eines Event-Listeners das Klick-Ereignis unserer Menüpunkte abgefangen werden, um das normale Verhalten zu unterbinden und stattdessen die ScrollTo-Funktion aufzurufen.

Alternative Klick-Funktion

$(document).on("click", "a[href^=#]", function (e) { // alle anchor a tags
    var id = $(this).attr("href"); // ID des Elements, zu dem gescrollt werden soll
    if ($(id).length > 0) {  // existiert das Element überhaupt?
         e.preventDefault();  // Standard-Verhalten unterbinden
         controller.scrollTo(id); // Scroll auslösen
         // Wenn es der Browser unterstützt, können wir noch die URL ändern
         if (window.history && window.history.pushState) {
            history.pushState("", document.title, id);
        }
    }
});

Listing 9

Nimm mich mit!

Nun erscheint zwar ein Menü, sobald man aber nach unten scrollt, verschwindet es und nützt so reichlich wenig. Man könnte nun die CSS-Position als „fixed“ definieren, doch Ziel soll es sein, dass das Menü zu Anfang mitscrollt und erst, wenn es den oberen Viewport-Rand erreicht, „festgesetzt“ wird. Vielfach ist dieser Effekt als „sticky“ oder „pinned“ bekannt.

Auch hierfür bietet ScrollMagic eine einfache Lösung: Eine Szene, die auslöst, wenn das Menü den Viewport verlässt und es dann „festpinnt“.

Eine Szene, die das Menü festpinnt

new ScrollScene({triggerElement: '#menu', triggerHook: 'onLeave'})
    .setPin("#menu")
    .addTo(controller);

Listing 10

Die „Pin“-Funktionalität ist auch dann praktisch, wenn etwa eine ganze Sektion mit der Größe des Viewports für einige Zeit nicht mehr mitscrollen soll. So können mehrere Animationen an gleicher Stelle stattfinden, bevor das Scrollen normal weiterläuft und man sich zur nächsten Sektion bewegt.

Fazit

ScrollMagic ermöglicht es, unkompliziert und zugänglich zu definieren, was wann wie auf einem One-Pager passieren soll. Die hier gezeigten Beispiele sind nur ein kleiner Teil von dem, was alles umsetzbar ist: Parallax-Effekte, Mobile-Implementation, Responsive Design, Infinite Scrolling, CSS-Class-Toggles, Szenen-Events, Interaktive SVGs, Image-Sequences und vieles mehr – fast jede Aufgabe, die bei der Erstellung eines One-Pagers ansteht, ist lösbar. Wer neugierig geworden ist, findet auf der ScrollMagic-Demo-Site viele weitere Beispiele, Referenzen und Inspirationen.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
2 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Marcus

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

Gruß
Marcus

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

Antworten

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige