Share
Das Erstellen einer durch das Scrollen eingeleiteten Bewegung kann immens erfreulich sein. Wir werden in einen besonderen Effekt eintauchen, der auf der Casper Mattress-Website (erstellt von Jonnie Hallman) zu sehen ist, die viele Entwickler begeistert hat. In diesem Lernprogramm werden die Schritte beschrieben, die zum Erstellen einer ähnlichen Sprite-Animation mit ScrollMagic erforderlich sind.
Lassen Sie uns einen Blick darauf werfen, was wir erstellen werden:
Bevor wir mit dem Programmieren beginnen, benötigen wir ein Sprite, das als Grundlage für diese Demo dient. Hier ist der, den wir verwenden werden: Ich genieße eine schöne Tasse Kaffee. Sie können sich eine Kopie holen, um das Tutorial zu verfolgen.
MmmmmDas gesamte Sprite ist linear entlang der x-Achse angeordnet. Jedes Bild innerhalb des Sprites ist 200px x 509px, was zu einer Gesamtgröße von 2000px x 509px führt (jedes einzelne Bild ist 200px breit, multipliziert mit zehn Keyframes)..
Für Neugierige habe ich das Gulp-Plugin gezielt eingesetzt gulp.spritesmith anstatt das Sprite manuell zusammenzusetzen. Es ist zwar nicht erforderlich, diese Demo zu erstellen, aber hier ist das Setup, das ich verwendet habe, falls Sie es selbst ausprobieren möchten:
Accentsconagua
var gulp = required ('gulp'); var spritesmith = required ('gulp.spritesmith'); gulp.task ('sprite', function () var spriteData = gulp.src ('images / *. png').) pipe (spritesmith (imgName: 'sprite.png', cssName: 'sprite.css', algorithmOpts : sort: false, Algorithmus: 'left-right',)); return spriteData.pipe (gulp.dest ('images / dist')););Beachten Sie, dass die Algorithmus-Eigenschaft eine Reihe von Werten annehmen kann, um das Sprite linear, vertikal, diagonal und mehr anzuordnen. Ich empfehle Ihnen, sich die Zeit zu nehmen, um mehr über dieses Gulp-Plugin für Ihre zukünftigen Sprite-Anforderungen zu erfahren.
Das Markup ist der Boden, aus dem unsere Demo wachsen wird. Deshalb beginnen wir mit der Erstellung des Containers, in dem die Sprite-Animation stattfinden wird. Wir werden auch einige Dummy-Container erstellen, damit Regionen durchlaufen werden können.
Der Mittelteil mit dem Inhalt div Hier wird unsere Sprite-Bewegung ausgelöst, aber wir müssen ein paar Klassen und IDs hinzufügen, um das Styling und den Event-Hook zu ermöglichen.
Die Klasse js-scrollpin ist der Punkt, von dem aus das Ansichtsfenster beim Scrollen des Benutzers "fixiert" wird. Dieser Haltepunkt hält eine festgelegte Dauer in unserem JavaScript (dies wird in einem nächsten Abschnitt behandelt). Das Innere div mit der Klasse Rahmen wird der Punkt sein, an dem die Scroll-Magie stattfindet.
Unsere Demo wäre ohne das Styling nicht komplett, also fangen wir an! Um den Code unter Berücksichtigung von Aktualisierungen und Verfeinerungen zu schreiben, verwenden wir Sass, sodass wir die Schleife und die Variablen für das prägnante Authoring erstellen können.
$ frame count: 9; $ offset-val: 100;
Diese Variablen definieren:
Möglicherweise stellen Sie fest, dass ich nur die Frame-Anzahl auf 9 gesetzt habe, da das erste Frame bereits sichtbar ist und 9 Frames in der Sequenz verbleiben (10 - 1 = 9)..
Wie bereits erwähnt, ist jedes Bild in unserem Sprite 200px breit, ich werde also die Breite des Frames als 200px definieren.
.Rahmen Breite: 200px; Hintergrundbild: URL (sprite.png); Hintergrundwiederholung: keine Wiederholung; Hintergrundposition: 0 50%;
Das Bild wird als Hintergrund geladen und entsprechend positioniert.
Nun zur Schleife:
@für $ i von 1 bis $ frame-count .frame # $ i Hintergrundposition: - (($ i * $ offset-val) * 2) + px 50%;
Diese Sass-Schleife ist der wichtigste Teil. Beim Scrollen wird jede korrelierende Klasse über JavaScript umgeschaltet. Diese umschaltbaren Klassennamen korrelieren mit der Position jedes Bildes innerhalb des Sprites.
.frame1 Hintergrundposition: -200px 50%; .frame2 Hintergrundposition: -400px 50%; .frame3 Hintergrundposition: -600px 50%; .frame4 Hintergrundposition: -800px 50%; .frame5 Hintergrundposition: -1000px 50%; .frame6 Hintergrundposition: -1200px 50%; .frame7 Hintergrundposition: -1400px 50%; .frame8 Hintergrundposition: -1600px 50%; .frame9 Hintergrundposition: -1800px 50%;
Die kompilierte Ausgabe unseres Sass hilft zu erklären, wie diese Mathematik funktioniert, aber lassen Sie uns tiefer eintauchen, um sicherzustellen, dass wir vollständig verstehen, wie die Arithmetik berechnet wird.
$ i * $ offset-val
Bei jeder Wiederholung der Schleife wird die $ i variable Zyklen von 1 bis 9 und multipliziert mit dem Offset-Wert (100). Zum Schluss nehmen wir das gesamte Ergebnis und multiplizieren es mit einem Faktor 2. Der Faktor 2 hilft dabei, die Hintergrundposition relativ zu dem Ort zu verschieben, an dem sich jedes Bild im Sprite befindet. Er stimmt auch mit dem im JavaScript definierten Versatzwert überein, den wir im nächsten Teil unserer Reise besprechen werden.
Der Schlüssel zu diesem gesamten Effekt ist das JavaScript. Für diese spezielle Demo verwenden wir ScrollMagic. eine JavaScript-Bibliothek für magische Scroll-Interaktionen. Bevor Sie einen ScrollMagic-Code schreiben, stellen Sie sicher, dass die ScrollMagic-Bibliothek geladen ist.
Nachdem dies erledigt ist, werden wir einige Variablen festlegen.
var frame = document.querySelector ('. frame'), frame_count = 9, Versatz = 100;Die definierten Variablen sollten ziemlich vertraut aussehen, da sie sich direkt auf die von uns angegebenen Werte beziehen, mit der Ausnahme, dass die Frame-Klasse mit ausgewählt wird document.querySelector.
var controller = new ScrollMagic.Controller (globalSceneOptions: triggerHook: 0);
Der Controller ist die Hauptklasse, die einmal pro Bildlaufcontainer benötigt wird. Unsere globalSceneOptions übergebenes Objekt enthält a Abzugshaken. Die Werte dieser Eigenschaft können eine Zahl zwischen 0 und 1 sein, die die Position des Auslöserhakens in Bezug auf das Ansichtsfenster definiert.
new ScrollMagic.Scene (triggerHook: 0, triggerElement: '.js-scrollpin', Dauer: (frame_count * offset) + 'px', reverse: true) .setPin ('. js-scrollpin') .addTo (Controller) );Wir definieren den Pin einmal in der Zielszene und fügen unsere Animation in derselben Szene an. Wir erstellen für jede Klasse eine Szene und schalten sie je nach Offset-Wert der Bildlaufleiste ein oder aus.
Es gibt noch ein paar Dinge, die noch erklärt werden müssen.
triggerElement: '.js-scrollpin'
Das Trigger-Element ist die referenzierende ID des Bereichs, in dem sich unser Sprite befindet.
.setPin ('. js-scrollpin')Das setPin Methode sagt ScrollMagic an, sobald die triggerElement erreicht wird, pinnen Sie dieses Bedienfeld oben im Ansichtsfenster an.
Dauer: (frame_count * offset) + 'px',
Die Dauer steuert anhand der Bildanzahl und des Versatzes, wie lange die Bewegung auftritt. Wie Sie sich erinnern werden, hatten wir eine Bildanzahl von 9 und einen Versatz von 100. Wenn diese Werte miteinander multipliziert werden, entsprechen sie 900px. der Gesamtwert der Trigger-Offsetpunkte.
für (var i = 1, l = frame_count; i <= l; i++) new ScrollMagic.Scene( triggerElement: '.js-scrollpin', offset: i * offset ) .setClassToggle(frame, 'frame' + i) .addTo(controller);
Da es neun Frames gibt, durchlaufen wir diese Anzahl von Iterationen, wobei wir das gleiche Panel für ein triggerElement definieren. Bei jeder Wiederholung der Schleife multiplizieren wir den Wert der Schleife mit dem Offset-Betrag (1 * 100, 2 * 100, 3 * 100…). Wir definieren auch eine Klasse zum Umschalten; .frame1, .frame2, .frame3 und so weiter. Jede der Klassen repräsentiert die Hintergrundposition jedes Bildes innerhalb des Sprites.
Sie fragen sich vielleicht, wie groß die gesamte Dateigröße des Sprites ist, also lassen Sie mich einige Zahlen angeben. Unkomprimiert wog das Bild beachtliche 1,5 MB, aber wenn es komprimiert wurde, ergab sich ein akzeptableres Volumen von 319 KB. Die 6 KB, die zum Laden der ScrollMagic-Bibliothek verwendet wurden, sind nicht enthalten.
Ich hoffe, dass Sie sich für diese Technik für Ihr nächstes Projekt einsetzen lassen. Bitte haben Sie wie immer die Möglichkeit, in den folgenden Kommentaren Fragen zu stellen. Glückliche Kodierung!
