Logg på den stiplede linjen Fullfør din animasjon med veipunkt

I den forrige opplæringen animerte vi en SVG-signatur ved hjelp av CSS. Det er en flott effekt, slik at det ser ut som om ordene skrives der der på skjermen. I denne opplæringen tar vi ting videre og bruker veipunkter for å utløse animasjonen når vi velger.

Problemet

Vår animerte signatur er ikke perfekt. Skrivereffekten begynner når siden lastes, selv om SVG er nederst på siden, uten syn. Ideelt sett vil vi at signaturen skal animere når den først ruller inn i visning.

For dette må vi bruke JavaScript og litt hjelp fra Waypoints biblioteket. Veipunkter vil oppdage når signaturen ruller inn i visning, på hvilket tidspunkt vil vi legge til en klasse til element, og dermed utløse animasjonen.

8. Legg til noen fyllstoffer innhold

Til å begynne med, legg til en del av stykker og litt tekst som dukker opp øverst på siden, og trykk på signaturen fra visningsporten. Vi legger også til noen generiske stiler for å gjøre hele greia litt enklere på øyet:

kropp polstring-topp: 20px; bredde: 90%; maksimal bredde: 580px; margin: 0 auto; farge: # 263238;  p skriftstørrelse: 16px; linjehøyde: 1,5; margin: 0 0 1.5em;  # signatur bredde: 40%; polstring: 2em 0; 

Bonuspoeng!

Jeg har brukt en strålende wireframing skrifttype kalt BLOKK Neue-det er et flott stilistisk tillegg til vår demo og trekker fokus på vår signatur. Hvis du vil, last ned skrift og bruk det selv.

p font-family: "BLOKKNeue-Regular", serif; skriftstørrelse: 16px; linjehøyde: 1,5; margin: 0 0 1.5em; 

For mer informasjon om hvordan du bruker webfonter, sjekk ut å finne ut @ font-face av Jeremy Loyd.

9. Ta med Waypoints.js

Uvanlig for meg, jeg kommer ikke til å lene meg på jQuery. Waypoints 3.0 introduserte en helt rammefri versjon, så jeg vil være dristig og bruke det. Hvis du foretrekker jQuery-syntaks, eller allerede har jQuery tilkoblet prosjektet av andre grunner, og bare synes det er lettere å bruke, må du på alle måter gå med en annen Waypoints-fil og endre koden vi skriver i henhold til dette.

I hvert fall ta tak i filen, koble den til fra HTML-dokumentet ditt (eller innenfor ditt CodePen JS-panel) og lene deg tilbake med en kopp kaffe i fem minutter.

Pek på SVG

Vi må fortelle Waypoints om vår , så la oss ta den og tildele den til variabelen mySignature:

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

Nå legger vi opp Waypoint-klassen, så legg til følgende utdrag til JS-panelet i CodePen (eller innenfor > koder nederst på HTML-dokumentet ditt hvis du gjør ting på den måten).

Vi må sørge for at vi passerer vår mySignature til element alternativ (så det vet hvilket element det ser ut til) og sørger for at behandleren alternativet er definert. Handleren er hvor vi dikterer hva som skjer når veipunktet utløses.

var mySignature = document.getElementById ('signatur'); var waypoint = nytt veipunkt (element: mySignature, handler: funksjon (retning) )

Bunnen av vinduet

Ovennevnte kode vil utløse "noe" når toppen av vår elementet treffer toppen av vinduet. Vi trenger veipunktet til å utløse når bunnen av treffer bunnen av vinduet, med andre ord når den er helt rullet inn i visningen. For dette kan vi bruke Waypoints 'Offsets. Offsets tillater oss å spesifisere nøyaktig når vi vil ha et element for å utløse en handling - i tilfelle vi vil bruke: offset: "bottom-in-view" som dette:

var mySignature = document.getElementById ('signatur'); var waypoint = nytt veipunkt (element: mySignature, handler: funksjon (retning) , offset: 'bottom-in-view')

handler

Til slutt må vi spesifisere hva som skal skje når veipunktet utløses. Vi ønsker en klasse (animere) å bli lagt til vår og den klassen blir det vi legger til animasjonene våre til. Animasjonene vil derfor bare begynne å spille når klassen er lagt til. Vi legger til mySignature.classList.add ( 'animere') til håndteringsfunksjonen, og gir oss et komplett skript som ser slik ut:

var mySignature = document.getElementById ('signatur'); var waypoint = nytt veipunkt (element: mySignature, handler: funksjon (retning) mySignature.classList.add ('animere'), offset: 'bottom-in-view')

10. Bruke .animere i vårt CSS

Husk alle de reglene der vi definerte animasjonene? Vi skal få litt mer spesifikk. I stedet for å ha:

.stroke-I stroke-dasharray: 80; animasjon: write1 2s 1 utløp; 

Vi skal gjøre hver eneste søker bare når animere klassen har blitt lagt til foreldrene :

.anime .stroke-I stroke-dasharray: 80; animasjon: write1 2s 1 utløp; 

Resultatet skal være ganske nært, prøv å bla ned:

# signatur bredde: 40%; polstring: 2em 0; opasitet: 0;  # signature.animate opacity: 1;