Logga på den prickade linjen Avsluta din animering med waypoints

I den tidigare handledningen animerade vi en SVG-signatur med CSS. Det är en bra effekt, så att det verkar som om orden skrivs precis där på skärmen. I den här handledningen tar vi saker vidare och använder waypoints för att aktivera animeringen när vi väljer.

Problemet

Vår animerade signatur är inte perfekt - skrivningseffekten börjar när sidan laddas, även om SVG är längst ner på sidan, ur synhåll. Vi vill helst att signaturen ska animera när den först rullar in i sikte.

För detta behöver vi använda JavaScript och lite hjälp från Waypoints biblioteket. Waypoints kommer att upptäcka när vår signatur rullar in i vyn, vid vilken tidpunkt lägger vi till en klass i element, och därigenom utlösa animationen.

8. Lägg till lite fyllnadsinnehåll

Till att börja med lägger du till en rad stycken och lite text som du vill lägga ut på toppen av sidan och trycker på vår signatur utanför visningsporten. Vi lägger också till några generiska stilar för att göra hela grejen lite enklare på ögat:

kropp vadderar-topp: 20px; bredd: 90%; maxbredd: 580px; marginal: 0 auto; färg: # 263238;  p fontstorlek: 16px; linjehöjd: 1,5; marginal: 0 0 1.5em;  #signature width: 40%; vaddering: 2em 0; 

Bonuspoäng!

Jag har använt ett briljant wireframing typsnitt som heter BLOKK Neue-det är ett utmärkt stilistiskt tillägg till vår demo och drar fokus på vår signatur. Om du vill ladda ner teckensnittet och använd det själv.

p font-family: "BLOKKNeue-Regular", serif; typsnittstorlek: 16px; linjehöjd: 1,5; marginal: 0 0 1.5em; 

För mer information om hur man använder webbfonter kolla in Figuring Out @ font-face av Jeremy Loyd.

9. Ta in Waypoints.js

Ovanligt för mig kommer jag inte att luta mig på jQuery. Waypoints 3.0 introducerade en helt ramfri version, så jag är vågad och använder det. Om du föredrar jQuery-syntax eller redan har jQuery kopplat till ditt projekt av andra skäl och bara tycker det är lättare att använda, går du med en annan Waypoints-fil och ändrar koden vi skriver i enlighet med.

Under alla omständigheter, ta tag i filen, länka till den från ditt HTML-dokument (eller inom din CodePen JS-panel) och luta dig tillbaka med en kopp kaffe i fem minuter.

Peka på SVG

Vi måste berätta vägpunkter om vårt , så låt oss ta tag i det och tilldela det till variabeln min signatur:

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

Nu instanserar vi Waypoint-klassen, så lägg till följande kod i JS-rutan i CodePen (eller inom > taggar längst ner i ditt HTML-dokument om du gör saker på det sättet).

Vi måste se till att vi passerar vår min signatur till element alternativ (så det vet vilket element det ser ut) och se till att hanterare alternativet är definierat. Handlaren är där vi dikterar vad som händer när waypointen utlöses.

var mySignature = document.getElementById ('signatur'); var waypoint = ny waypoint (element: mySignature, handler: funktion (riktning) )

Bottom of the Window

Ovanstående kod kommer att utlösa "något" när toppen av vårt elementet träffar toppen av fönstret. Vi behöver waypoint för att utlösa när botten av träffar fönstrets botten, med andra ord när den är helt rullade in i vyn. För detta kan vi använda Waypoints Offsets. Offsets tillåter oss att ange exakt när vi vill att ett element ska utlösa en åtgärd, i det fall vi vill använda: offset: "bottom-in-view" så här:

var mySignature = document.getElementById ('signatur'); var waypoint = ny waypoint (element: mySignature, handler: funktion (riktning) , offset: "bottom-in-view")

Hanterare

Slutligen måste vi ange vad som ska hända när waypointen utlöses. Vi vill ha en klass (animera) att läggas till vår och den klassen blir vad vi bifogar våra animationer till. Animationerna börjar därför bara spela när klassen läggs till. Vi lägger till mySignature.classList.add ( 'animera') till handlarfunktionen, vilket ger oss ett komplett skript som ser ut så här:

var mySignature = document.getElementById ('signatur'); var waypoint = ny waypoint (element: mySignature, handler: funktion (riktning) mySignature.classList.add ('animera'), offset: 'bottom-in-view')

10. Använda .animera i vår CSS

Kom ihåg alla de regler där vi definierade animationerna? Vi ska bli lite mer specifika. Istället för att ha:

.stroke-I stroke-dasharray: 80; animering: write1 2s 1 uthyrning; 

Vi kommer att göra att var och en endast gäller när animera klassen har lagts till föräldern :

.animera .stroke-I stroke-dasharray: 80; animering: write1 2s 1 uthyrning; 

Resultatet ska vara ganska nära, försök att rulla ner:

#signature width: 40%; vaddering: 2em 0; opacitet: 0;  # signature.animate opacity: 1;