Înregistrați-vă pe linia punctată Finalizați-vă animația cu puncte

În tutorialul anterior am animat o semnătură SVG utilizând CSS. Este un efect grozav, făcându-l să pară ca și cum cuvintele sunt scrise chiar acolo pe ecran. În acest tutorial vom lua mai departe lucrurile și vom folosi punctele Waypoint pentru a declanșa animația când vom alege.

Problema

Semnătura noastră animată nu este perfectă - efectul de scriere începe când pagina se încarcă, chiar dacă SVG se află în partea de jos a paginii, din vedere. În mod ideal, am dori ca semnătura să fie animată ori de câte ori este afișată pentru prima oară.

Pentru aceasta, trebuie să folosim JavaScript și un mic ajutor din biblioteca Waypoints. Punctele de parcurs vor detecta momentul în care semnătura noastră se va derula, în care moment vom adăuga o clasă la element și, în acest mod, declanșează animația.

8. Adăugați un conținut pentru filtre

În primul rând, adăugați o încărcătură de paragrafe și un anumit text pentru a elimina partea de sus a paginii și împingeți semnătura din portul de vizualizare. Vom adăuga, de asemenea, câteva stiluri generice pentru a face totul ușor mai ușor pe ochi:

corp padding-top: 20px; lățime: 90%; max-lățime: 580px; marja: 0 auto; culoare: # 263238;  p font-size: 16px; înălțimea liniei: 1,5; marja: 0 0 1,5;  #signature width: 40%; padding: 2em 0; 

Puncte bonus!

Am folosit un font strălucitor de tip wireframing numit BLOKK Neue - este un extras stilistic excelent pentru demo-ul nostru și atrage atenția asupra semnării noastre. Dacă doriți, descărcați fontul și utilizați-l singur.

p font-family: "BLOKKNeue-Regular", serif; font-size: 16px; înălțimea liniei: 1,5; marja: 0 0 1,5; 

Pentru mai multe informații despre modul de utilizare a fonturilor web, verificați formularul de scriere @ font-face de Jeremy Loyd.

9. Aduceți în Waypoints.js

În mod neobișnuit pentru mine, nu mă voi baza pe jQuery. Waypoints 3.0 au introdus o versiune complet gratuită, așa că voi fi îndrăzneață și folosind asta. Dacă preferați sintaxa jQuery sau dacă deja aveți jQuery conectat în proiectul dvs. din alte motive și doar că este mai ușor de utilizat, mergeți prin toate mijloacele cu un alt fișier Waypoints și modificați codul pe care îl scriem în consecință.

În orice caz, prindeți fișierul, conectați-l la documentul HTML (sau în panoul dvs. CodePen JS) și stați înapoi cu o ceașcă de cafea timp de cinci minute.

Accesați SVG

Trebuie să-i spunem Waypoints despre noi , așa că haideți să o luăm și să o atribuim variabilei semnătura mea:

var mySignature = document.getElementById ("semnătură");

Acum instanțiăm clasa Waypoint, deci adăugați următorul fragment în panoul JS din CodePen (sau în cadrul > în partea de jos a documentului dvs. HTML dacă faceți lucruri în acest fel).

Trebuie să ne asigurăm că trecem pe noi semnătura mea la element (astfel încât să știe ce element se uită la el) și să vă asigurați că manipulant este definită opțiunea. Operatorul este locul unde dictează ceea ce se întâmplă când se declanșează punctul de parcurs.

var mySignature = document.getElementById ("semnătură"); var pointpoint = nou punct (element: mySignature, handler: funcție (direcție) )

Partea de jos a ferestrei

Codul de mai sus va declanșa "ceva" atunci când este partea de sus a site-ului nostru element atinge partea de sus a ferestrei. Avem nevoie de punctul de tragere pentru a declanșa atunci când partea de jos a lovește partea de jos a ferestrei, cu alte cuvinte când este complet derulată. Pentru aceasta putem folosi Offseturile punctelor. Offseturile ne permit să specificăm exact când vrem ca un element să declanșeze o acțiune - în cazul nostru dorim să folosim: offset: "bottom-in-view" asa:

var mySignature = document.getElementById ("semnătură"); var pointpoint = nou punct (element: mySignature, handler: functie (directie) , offset: bottom-in-view)

manipulant

În cele din urmă, trebuie să specificăm ce se va întâmpla când se declanșează punctul de parcurs. Vrem o clasă (anima) care urmează să fie adăugate la pagina noastră și acea clasă va fi cea la care ne atașăm animațiile. Prin urmare, animațiile vor începe să fie redate numai după adăugarea clasei. Vom adăuga mySignature.classList.add ( 'anima') la funcția handler, oferindu-ne un scenariu complet care arată astfel:

var mySignature = document.getElementById ("semnătură"); var pointpoint = nou punct (element: mySignature, handler: funcție (direcție) mySignature.classList.add ('animate'), offset: 'bottom-in-view'

10. Utilizarea .anima în CSS-ul nostru

Amintiți-vă toate regulile în care am definit animațiile? Vom avea ceva mai specific. În loc de a avea:

.accident vascular cerebral-I accident vascular cerebral: 80; animație: write1 2s 1 ușurință-out; 

vom face ca fiecare să se aplice numai atunci când anima clasa a fost adăugată la părinte :

.animați .stroke-I stroke-dasharray: 80; animație: write1 2s 1 ușurință-out; 

Rezultatul ar trebui să fie destul de aproape, încercați să derulați în jos:

#signature width: 40%; padding: 2em 0; opacitate: 0;  # semnătură.animată opacitate: 1;