Vorstellung von ScrollMagic 2.0

Wenn Sie in Ihrem nächsten Projekt unbedingt schöne Bildlaufanimationen erstellen möchten, suchen Sie nicht weiter. ScrollMagic ist eine JavaScript-Bibliothek, mit der Sie "magische" Scroll-Interaktionen erstellen können, die mühelos auf die aktuelle Scrollposition des Benutzers reagieren und Animationen oder synchronisierte Ereignisse auslösen. 

ScrollMagic hat in letzter Zeit einige große Veränderungen durchlaufen, so dass hier ein kurzer Überblick über die Änderungen und Verbesserungen seit der Wiedergeburt gegeben wird.

Die ScrollMagic-Startseite

Was gibt's Neues?

Abhängigkeiten, die einst Kernkomponenten von ScrollMagic waren, wie GreenSock (GSAP) und jQuery, wurden vollständig aus der Bibliothek entfernt. Ab 2.0.0 alles, was Features hinzufügt oben drauf von ScrollMagic wird als Plugin behandelt, was ScrollMagic schließlich zu einer eigenständigen Bibliothek macht (6 KB)! 

Das Changelog enthält viele andere Facetten, die angepasst wurden, falls Sie sich für tieferes Tauchen entscheiden. Falls Sie keine Zeit haben, werden hier einige Änderungen hervorgehoben:

1. Entfernung von Abhängigkeiten und Einführung von Plugins
2. Controller werden jetzt mit instanziiert ScrollMagic.Controller ()
3. Szenen sind jetzt als definiert ScrollMagic.Scene ()
4. Entfernung von triggerOffset
5. Entfernung von pinClass (dies kann mit erreicht werden setClassToggle in 2.0)
6. Stoßfedern Standardwert ist auf festgelegt falsch
7. Neue Veranstaltungen: hinzufügen und Löschen
8. Umbenannt .Elternteil zu .Regler
9. Debug-Erweiterung umbenannt in plugins / scene.addIndicators und kann vor dem Controller hinzugefügt werden und funktioniert auch, wenn Szenen entfernt und erneut hinzugefügt werden.
10. Neue Methode removeIndicators

Leistungsverbesserungen

Performance-Verbesserungen, die die Geschwindigkeit von ScrollMagic verbessern, wurden von Paul Irish in Bezug auf die Aktualisierung von RAF (Request Animation Frame) vorgeschlagen. Anstatt direkt auf das Scroll-Ereignis zu hören, wurde ursprünglich eine Technik namens "Entprellung" verwendet. Dies bedeutet, dass alles, was auf Scroll ausgeführt werden soll, tatsächlich in einem Timeout (Verzögerung) ausgeführt wird. Wann onScroll Das einzige, was sich geändert hatte, war eine Variable wie wasScrolled = true und in der Timeout-Funktion überprüft. Ursprünglich wurde die Debounce-Funktion auf RAF aufgerufen und ständig nach dem gesucht wurde gescrollt var in einer Schleife. 

Statt einer Schleife ist es jetzt nur eine Zeitplanung, die nächste RAF zu überprüfen, wenn ein Scroll-Ereignis ausgelöst wird. All dies bedeutet, dass keine Schleife ausgeführt wird, wenn kein Bildlauf stattfindet!

Ansprechende Dauer

Ansprechende Dauern müssen neben den Leistungssteigerungen eine meiner bevorzugten Verbesserungen der Bibliothek sein. Das Szene duration kann jetzt eine Prozentwertzeichenfolge akzeptieren "100%". Die Bildlaufleiste wird in Relation zur Größe des Containers der Bildlaufleiste berechnet. ScrollMagic verwendet die Höhe des Containers für Systeme mit vertikalem Bildlauf und seine Breite für Container mit horizontalem Bildlauf.

var scene = new ScrollMagic.Scene (duration: "100%");

Skript wird geladen

Die Reihenfolge der Skripte ist jetzt etwas anders, da Bibliotheken wie GSAP getrennt wurden und nicht Teil des ScrollMagic-Kerns sind. Das heißt, wann immer Sie eine Bibliothek wie TweenMax wünschen, müssen Sie zuerst die GSAP-Hauptbibliothek, dann die Kern-ScrollMagic-Bibliothek und dann das von Ihnen gewählte ScrollMagic-Plugin laden. 

Denken Sie daran, immer zuerst die Haupt-GSAP-Bibliothek zu laden, dann die ScrollMagic-Plugins.

Der Skriptaufruf für das GSAP-Plugin ist das neue Plugin von ScrollMagic, das die GSAP-Tween-Funktionalität enthält, die zuvor in ScrollMagic integriert war. Jan hat auchique.js für diejenigen integriert, die die Funktionalität von GSAP nicht wünschen.

Controller definieren

Ein Controller ist eine Möglichkeit, "Szenen zu steuern". Diese Klasse wird einmal pro Scroll-Container benötigt und in 2.0 etwas anders geschrieben.

Vergleichen wir die Art und Weise, wie Controller jetzt instanziiert werden, mit der in der alten Version:

Alter Weg

var controller = new ScrollMagic ();

Neuer Weg

var controller = new ScrollMagic.Controller ();

Szenen

Die Szene ist der Ort Ihrer Bewegung / Animation. Sie definiert, wo und wie der Controller reagieren soll. Dies ist auch ein anderes Beispiel, bei dem sich die Syntax leicht geändert hat.

Alter Weg

var scene = new ScrollScene (triggerElement: "# pinned-trigger"), Dauer: $ (window) .height () - 100, triggerHook: 0, reverse: true) .setPin ("# pinned-element") .addTo (Regler);

Neuer Weg

var scene = new ScrollMagic.Scene (triggerElement: "# pinned-trigger"), Dauer: $ (window) .height () - 100, triggerHook: 0, reverse: true) .setPin ("# pinned-element") .addTo (Controller);

Tipps zur Aktualisierung

Als ich mit dem Schöpfer von ScrollMagic, Jan Paepke, sprach, erfuhr ich einen tollen Zeitersparnis-Tipp, der die Migration von Ihrem alten ScrollMagic-Code zu dem neuen erleichtert

1. Führen Sie zunächst in Ihrem Texteditor ein „Suchen und Ersetzen“ für „ScrollMagic”Und ersetze die Zeichenkette durch“SM_TMP”In all Ihren Dateien. 
2. Nächstes ersetzen “ScrollSceneMit mitScrollMagic.Scene”.
3. Zum Schluss ersetzen Sie "SM_TMPMit mitScrollMagic.Controller”.

Hinweis: Stellen Sie sicher, dass Sie die Quelldateien von ScrollMagic nicht in Ihre Suchfunktion einschließen, und wenden Sie sie auf Ihren eigenen Code an. Dies ist ein zusätzlicher Schritt, aber sicherer, da es Situationen gibt, in denen Leerzeichen vor den Klammern stehen.

Dokumentation

Wenn Sie Anleitungen zu ScrollMagic benötigen, können Sie sich meine CodePen-Sammlung ansehen, die für den WIKI-Abschnitt des ScrollMagic-Repos verwendet wird. Das WIKI bietet neben den Demos im Beispielteil der offiziellen ScrollMagic-Site auch großartige Erklärungen:

Machen Sie jetzt tolle Scroll-Animationen für Ihr Projekt!