Zeichen auf der gepunkteten Linie Animation mit Wegpunkten beenden

Im vorherigen Tutorial haben wir eine SVG-Signatur mit CSS animiert. Es ist ein großartiger Effekt, der den Anschein erweckt, als würden die Wörter direkt auf dem Bildschirm geschrieben. In diesem Tutorial gehen wir weiter und verwenden Wegpunkte, um die Animation nach Belieben auszulösen.

Das Problem

Unsere animierte Signatur ist nicht perfekt - der Schreibeffekt beginnt mit dem Laden der Seite, selbst wenn sich die SVG-Datei am unteren Rand der Seite befindet. Im Idealfall möchten wir, dass die Signatur animiert wird, wenn sie zum ersten Mal in Sichtweite angezeigt wird.

Dafür benötigen wir JavaScript und eine kleine Hilfe aus der Waypoints-Bibliothek. Wegpunkte werden erkennen, wenn unsere Signatur in Sicht kommt. An dieser Stelle fügen wir der Klasse eine Klasse hinzu Element und lösen dabei die Animation aus.

8. Fügen Sie einige Füllinhalte hinzu

Fügen Sie zunächst eine Menge Absätze und etwas Text hinzu, um den oberen Rand der Seite auszufüllen, und drücken Sie die Signatur aus dem Ansichtsfenster. Wir werden auch einige generische Stile hinzufügen, um das Ganze ein wenig einfacher zu machen:

körper padding-top: 20px; Breite: 90%; Max-Breite: 580px; Marge: 0 auto; Farbe: # 263238;  p Schriftgröße: 16px; Zeilenhöhe: 1,5; Marge: 0 0 1,5 em;  #signature width: 40%; Polsterung: 2em 0; 

Bonuspunkte!

Ich habe eine brillante Wireframing-Schriftart namens BLOKK Neue verwendet - sie ist eine großartige stilistische Ergänzung zu unserer Demo und lenkt den Fokus auf unsere Signatur. Wenn Sie möchten, laden Sie die Schriftart herunter und verwenden Sie sie selbst.

p font-family: "BLOKKNeue-Regular", serif; Schriftgröße: 16px; Zeilenhöhe: 1,5; Marge: 0 0 1,5 em; 

Weitere Informationen zur Verwendung von Webfonts finden Sie unter Figuring Out @ font-face von Jeremy Loyd.

9. Bringen Sie Waypoints.js ein

Ungewöhnlich für mich werde ich mich nicht auf jQuery stützen. Mit Waypoints 3.0 wurde eine komplett rahmenfreie Version eingeführt, also werde ich es wagen und es verwenden. Wenn Sie die jQuery-Syntax bevorzugen oder jQuery aus anderen Gründen bereits in Ihr Projekt eingebunden haben und es einfacher zu finden ist, verwenden Sie auf jeden Fall eine andere Wegpunkt-Datei und ändern Sie den Code, den wir entsprechend schreiben.

In jedem Fall sollten Sie die Datei abrufen, von Ihrem HTML-Dokument (oder in Ihrem CodePen JS-Bedienfeld) darauf verlinken und sich fünf Minuten lang bei einer Tasse Kaffee zurücklehnen.

Zeigen Sie auf die SVG

Wir müssen Waypoints von unseren erzählen , Also lass es uns packen und der Variablen zuweisen Meine Unterschrift:

var mySignature = document.getElementById ('Signatur');

Jetzt instanziieren wir die Waypoint-Klasse. Fügen Sie dem JS-Bereich in CodePen (oder innerhalb von) das folgende Snippet hinzu > Tags am unteren Rand Ihres HTML-Dokuments, wenn Sie so vorgehen.

Wir müssen sicherstellen, dass wir unsere bestehen Meine Unterschrift zum Element Option (also weiß er, auf welches Element er aufpasst) und stellt sicher, dass Handler Option ist definiert. Im Handler bestimmen wir, was passiert, wenn der Wegpunkt ausgelöst wird.

var mySignature = document.getElementById ('Signatur'); var Wegpunkt = neuer Wegpunkt (Element: mySignature, Handler: Funktion (Richtung) )

Unten im Fenster

Der obige Code löst "etwas" aus, wenn die Spitze unseres Element trifft oben auf das Fenster. Wir müssen den Wegpunkt auslösen, wenn der Boden des wird am unteren Rand des Fensters angezeigt, mit anderen Worten, wenn es vollständig in die Ansicht gerollt ist. Dafür können wir Wegpunkte-Offsets verwenden. Mit Offsets können wir genau angeben, wann ein Element eine Aktion auslösen soll. In unserem Fall verwenden wir: Versatz: 'bottom-in-view' so was:

var mySignature = document.getElementById ('Signatur'); var Wegpunkt = neuer Wegpunkt (Element: mySignature, Handler: Funktion (Richtung) , Versatz: 'bottom-in-view')

Handler

Zum Schluss müssen wir noch angeben, was passiert, wenn der Wegpunkt ausgelöst wird. Wir wollen eine Klasse (animieren) zu unserem hinzugefügt werden und diese Klasse wird das sein, was wir mit unseren Animationen verbinden. Die Animationen werden daher erst nach dem Hinzufügen der Klasse abgespielt. Wir werden hinzufügen mySignature.classList.add ('animate') auf die Handler-Funktion, die uns ein vollständiges Skript gibt, das wie folgt aussieht:

var mySignature = document.getElementById ('Signatur'); var waypoint = new Waypoint (element: mySignature, Handler: Funktion (Richtung) mySignature.classList.add ('animate'), Offset: 'bottom-in-view')

10. Verwenden von .animieren in unserem CSS

Erinnern Sie sich an all die Regeln, bei denen wir die Animationen definiert haben? Wir werden etwas genauer werden. Anstatt zu haben:

.Schlaganfall-I Schlaganfallstrich: 80; Animation: write1 2s 1 Auslauf; 

Wir werden jeden nur dann anwenden, wenn die animieren Klasse wurde dem übergeordneten Element hinzugefügt :

.animate .stroke-I Schlaganfallarray: 80; Animation: write1 2s 1 Auslauf; 

Das Ergebnis sollte ziemlich nahe sein. Versuchen Sie, nach unten zu scrollen:

#Signatur Breite: 40%; Polsterung: 2em 0; Deckkraft: 0;  # signature.animate Deckkraft: 1;