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

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

3 Kommentare

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