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

Entwicklung & Design

ScrollMagic: Ein Animationsframework, das hält was der Name verspricht

ScrollMagic hält was der Name verspricht. (Screenshot: ScrollMagic)

Kennt ihr eigentlich Superscrollorama von John Polacek? Dann werdet ihr ScrollMagic lieben. Das Framework kann alles was Superscrollorama auch kann, nur höher, schneller, weiter!

Jan Paepke hat den Urvater der Scroll- und Animation-Frameworks, nämlich Superscrollorama, von Grund auf neu entwickelt und geschrieben.

Am besten könnt ihr euch ScrollMagic als ein Skript vorstellen, das den Scrollbalken als eine Art „Fortschrittsbalken“ sieht. Wird ein gewisser Punkt erreicht: Zack – und es wird eine Funktion gezündet. Das hört sich jetzt noch alles sehr abstrakt und wenig spektakulär an: wartet aber bis ihr die Demos gesehen habt.

Wie auch Superscrollorama basiert ScrollMagic auf der „Greensock Animation Plattform“ (GSAP), wurde aber um folgende Funktionen erweitert:

  • Erhöhte Performance
  • Unterstützung mobiler Geräte
  • Full-responsive-Unterstützung
  • Objektorientierte Programmierung
  • Unterstützung von horizontalem und vertikalem scrollen
  • Scroll-Möglichkeit innerhalb von (multiplen) Divisions
  • Debugging-Extension

Mit ScrollMagic könnt ihr ganz einfach Parallax-Effekte erzeugen, Scrollbar-abhängige Events abfeuern, „Infinite-Scrolling“ mit Ajax-Anfragen umsetzen und Animationen mit der Scrollgeschwindigkeit synchronisieren, kurzum: ScrollMagic hält was der Name verspricht.

ScrollMagic: So könnt ihr es nutzen

Bevor ihr ScrollMagic nutzen könnt, müsst ihr vorher die Abhängikeiten beachten. Das jQuery-Plugin benötigt jQuery sowie GSAP. Tutorials zur Installation und Demos zu GSAP könnt ihr auf der offiziellen Seite finden. Wie bereits angesprochen verfügt ScrollMagic über eigene Debugging-Tools die ihr wie folgt einbinden könnt.

<script type="text/javascript" src="js/jquery.scrollmagic.debug.js"></script>

Der folgende Code zeigt euch, wie ihr das Skript initialisieren könnt und wie ihr mit mehreren Szenen umgeht:

// init controller
var controller = new ScrollMagic();

// assign handler "scene" and add it to Controller
var scene = new ScrollScene({duration: 100})
                .addTo(controller);

// add multiple scenes at once
var scene2;
controller.addScene([
    scene, // add above defined scene
    scene2 = new ScrollScene({duration: 200}), // add scene and assign handler "scene2"
    new ScrollScene({offset: 20}) // add anonymous scene
]);

Der komplette Code für ein simples Tweening-Beispiel mit ScrollMagic sieht so aus:

<script>
    var controller;
    $(document).ready(function($) {
        // init controller
        controller = new ScrollMagic();
    });
</script>
<div class="spacer s2"></div>
<div id="trigger1" class="spacer s0"></div>
<div id="animate1" class="box2 skin">
    <p>You wouldn't like me, when I'm angry!</p>
    <a href="#" class="viewsource">view source</a>
</div>
<div class="spacer s2"></div>
<script>
    $(document).ready(function($) {
        // build tween
        var tween = TweenMax.to("#animate1", 0.5, {backgroundColor: "green", scale: 2.5});

        // build scene
        var scene = new ScrollScene({triggerElement: "#trigger1"})
                        .setTween(tween)
                        .addTo(controller);

        // show indicators (requires debug extension)
        scene.addIndicators();
    });
</script>

ScrollMagic verfügt über eine umfassende Demo-Sammlung, in der auf beinahe jedes Szenario eingegangen wird. In der ausgezeichneten Dokumentation könnt ihr euch einen guten Überblick über alle Methoden und Klassen machen – auf jedenfall einen Blick wert.

Fazit: Gefällt mir!

ScrollMagic ist wirklich gut, ganz besonders gefällt mir aber wie ausführlich und übersichtlich das jQuery-Plugin dokumentiert ist. Ihr findet das Plugin auf GitHub. Und wer einfach nur einmal sehen möchte, was mit ScrollMagic alles möglich ist, dem kann ich die Website selbst empfehlen.

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

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

Jetzt anmelden

Finde einen Job, den du liebst