Iscriviti sulla linea tratteggiata termina la tua animazione con i waypoint

Nel tutorial precedente abbiamo animato una firma SVG usando CSS. È un grande effetto, sembra che le parole vengano scritte proprio lì sullo schermo. In questo tutorial faremo qualcosa di più e useremo i Waypoint per attivare l'animazione quando scegliamo.

Il problema

La nostra firma animata non è perfetta: l'effetto di scrittura inizia quando la pagina viene caricata, anche se l'SVG si trova in fondo alla pagina, fuori dalla vista. Idealmente vorremmo che la firma si animasse ogni volta che viene visualizzata per la prima volta.

Per questo, abbiamo bisogno di usare JavaScript e un piccolo aiuto dalla libreria Waypoints. I waypoint rileveranno quando la nostra firma scorrerà in vista, a quel punto aggiungeremo una classe al elemento, e così facendo attiva l'animazione.

8. Aggiungi alcuni contenuti di riempimento

Per cominciare, aggiungi un carico di paragrafi e del testo per riempire la parte superiore della pagina e spingere la nostra firma fuori dalla finestra. Aggiungiamo anche alcuni stili generici per rendere l'intera cosa un po 'più semplice per gli occhi:

body padding-top: 20px; larghezza: 90%; larghezza massima: 580 px; margine: 0 auto; colore: # 263238;  p font-size: 16px; altezza della linea: 1,5; margine: 0 0 1.5em;  #signature width: 40%; imbottitura: 2em 0; 

Punti bonus!

Ho usato un fantastico font wireframe chiamato BLOKK Neue: è una grande aggiunta stilistica alla nostra demo e richiama l'attenzione sulla nostra firma. Se vuoi, scarica il font e usalo tu stesso.

p font-family: "BLOKKNeue-Regular", serif; font-size: 16px; altezza della linea: 1,5; margine: 0 0 1.5em; 

Per ulteriori informazioni su come utilizzare i caratteri web, vedere Figure @ font-face di Jeremy Loyd.

9. Inserisci in Waypoints.js

Insolitamente per me, non ho intenzione di appoggiarmi a jQuery. Waypoints 3.0 ha introdotto una versione gratuita completamente framework, quindi sarò audace e utilizzarla. Se preferisci la sintassi jQuery, o hai già jQuery collegato al tuo progetto per altri motivi e trovi che è più semplice da usare, con tutti i mezzi vai con un diverso file Waypoint e modifica il codice che scriviamo di conseguenza.

In ogni caso, prendi il file, collegalo ad esso dal tuo documento HTML (o all'interno del tuo pannello JS CodePen) e siediti con una tazza di caffè per cinque minuti.

Indica l'SVG

Dobbiamo dire Waypoint sulla nostra , quindi prendiamolo e assegnalo alla variabile la mia firma:

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

Ora istanziamo la classe Waypoint, quindi aggiungi il seguente snippet al pannello JS in CodePen (o all'interno) > i tag nella parte inferiore del documento HTML se stai facendo le cose in questo modo).

Dobbiamo assicurarci di superare il nostro la mia firma al elemento opzione (in modo che sappia quale elemento sta guardando per) e assicurandosi che il gestore l'opzione è definita. Il gestore è dove dettiamo cosa succede quando il waypoint viene attivato.

var mySignature = document.getElementById ('signature'); var waypoint = new Waypoint (element: mySignature, handler: function (direction) )

Fondo della finestra

Il codice sopra attiverà "qualcosa" quando la parte superiore del nostro l'elemento colpisce la parte superiore della finestra. Abbiamo bisogno che il waypoint si inneschi quando il fondo del colpisce il fondo della finestra, in altre parole quando è completamente sfogliato nella vista. Per questo possiamo utilizzare gli offset dei waypoint. Gli offset ci permettono di specificare esattamente quando vogliamo che un elemento inneschi un'azione: nel nostro caso vogliamo usare: offset: "vista dal basso" come questo:

var mySignature = document.getElementById ('signature'); var waypoint = new Waypoint (element: mySignature, handler: function (direction) , offset: 'bottom-in-view'))

handler

Infine, dobbiamo specificare cosa accadrà quando viene attivato il waypoint. Vogliamo una classe (animare) da aggiungere al nostro e quella lezione sarà ciò a cui attribuiamo le nostre animazioni. Le animazioni inizieranno quindi solo a giocare una volta aggiunta la classe. Aggiungeremo mySignature.classList.add ( 'animare') alla funzione del gestore, dandoci uno script completo che assomiglia a questo:

var mySignature = document.getElementById ('signature'); var waypoint = new Waypoint (element: mySignature, handler: function (direction) mySignature.classList.add ('animate'), offset: 'bottom-in-view'))

10. Uso .animare nel nostro CSS

Ricorda tutte quelle regole in cui abbiamo definito le animazioni? Stiamo per diventare un po 'più specifici. Invece di avere:

.stroke-I stroke-dasharray: 80; animazione: write1 2s 1 easy-out; 

faremo in modo che ognuno si applichi solo quando il animare la classe è stata aggiunta al genitore :

.animate .stroke-I stroke-dasharray: 80; animazione: write1 2s 1 easy-out; 

Il risultato dovrebbe essere piuttosto vicino, provare a scorrere verso il basso:

#signature width: 40%; imbottitura: 2em 0; opacità: 0;  # signature.animate opacity: 1;