Teken op de stippellijn Afwerking van uw animatie met waypoints

In de vorige tutorial animeerden we een SVG-handtekening met behulp van CSS. Het is een geweldig effect, waardoor het lijkt alsof de woorden daar op het scherm worden geschreven. In deze tutorial gaan we verder en gebruiken we Waypoints om de animatie te activeren wanneer we daarvoor kiezen.

Het probleem

Onze geanimeerde handtekening is niet perfect - het schrijfeffect begint wanneer de pagina wordt geladen, zelfs als de SVG onderaan de pagina staat, uit het zicht. In het ideale geval willen we dat de handtekening wordt geanimeerd wanneer deze voor het eerst in beeld schuift.

Hiervoor moeten we JavaScript en een beetje hulp van de Waypoints-bibliotheek gebruiken. Waypoints detecteren wanneer onze handtekening in beeld verschijnt en op dat moment voegen we een klasse toe aan de element, en activeert daarmee de animatie.

8. Voeg wat Filler-inhoud toe

Voeg om te beginnen een lading alinea's en een aantal tekst toe om de bovenkant van de pagina te vullen en onze handtekening uit de viewport te duwen. We voegen ook een aantal generieke stijlen toe om het geheel een beetje makkelijker voor het oog te maken:

body padding-top: 20px; breedte: 90%; maximale breedte: 580 px; marge: 0 auto; kleur: # 263238;  p font-size: 16px; regelhoogte: 1,5; marge: 0 0 1.5em;  #signatuur width: 40%; opvulling: 2em 0; 

Bonus punten!

Ik heb een briljant wireframing-lettertype genaamd BLOKK Neue gebruikt - het is een geweldige stilistische toevoeging aan onze demo en trekt de focus naar onze handtekening. Download desgewenst het lettertype en gebruik het zelf.

p font-family: "BLOKKNeue-Regular", schreef; lettergrootte: 16px; regelhoogte: 1,5; marge: 0 0 1.5em; 

Ga voor meer informatie over het gebruik van weblettertypen naar Figuring Out @ font-face van Jeremy Loyd.

9. Breng Waypoints.js binnen

Ongebruikelijk voor mij, ik ga niet op jQuery leunen. Waypoints 3.0 heeft een volledig framevrije versie geïntroduceerd, dus ik zal het durven en gebruiken. Als u de jQuery-syntaxis verkiest, of jQuery al om andere redenen aan uw project hebt gekoppeld en het alleen maar eenvoudiger te gebruiken vindt, ga dan met alle middelen met een ander Waypoints-bestand en verander de code die we dienovereenkomstig schrijven.

Pak in elk geval het bestand, link ernaar vanuit uw HTML-document (of in uw CodePen JS-paneel) en leun achterover met een kopje koffie gedurende vijf minuten.

Wijs naar de SVG

We moeten Waypoints vertellen over onze , dus laten we het pakken en toewijzen aan de variabele mijn handtekening:

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

Nu starten we de Waypoint-klasse op, dus voeg het volgende fragment toe aan het JS-venster in CodePen (of in > tags onderaan je HTML-document als je dingen op die manier doet).

We moeten ervoor zorgen dat we onze mijn handtekening naar de element optie (zodat het weet voor welk element het uitkijkt) en ervoor zorgt dat het handler optie is gedefinieerd. De handler is waar we dicteren wat er gebeurt als het waypoint wordt geactiveerd.

var mySignature = document.getElementById ('handtekening'); var waypoint = nieuw waypoint (element: mySignature, handler: function (direction) )

Onderkant van het venster

De bovenstaande code activeert "iets" wanneer de bovenkant van onze element raakt de bovenkant van het venster. We hebben het waypoint nodig om te activeren wanneer de onderkant van de raakt de onderkant van het venster, met andere woorden wanneer het volledig in beeld is verschenen. Hiervoor kunnen we de offsets van Waypoints gebruiken. Met offsets kunnen we precies aangeven wanneer we een element een actie willen laten activeren - in ons geval willen we dit gebruiken: offset: 'onderaanzicht' zoals dit:

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

handler

Ten slotte moeten we aangeven wat er gaat gebeuren wanneer het waypoint wordt geactiveerd. We willen een klas (bezielen) om aan onze te worden toegevoegd en die klasse zal zijn waar we onze animaties aan hechten. De animaties zullen daarom pas beginnen met spelen als de klas is toegevoegd. We zullen toevoegen mySignature.classList.add ( 'animeren') naar de handler-functie, en geeft ons een compleet script dat er als volgt uitziet:

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

10. gebruik .bezielen in onze CSS

Onthoud al die regels waar we de animaties definieerden? We gaan wat specifieker worden. In plaats van:

.stroke-I stroke-dasharray: 80; animatie: write1 2s 1 gemak; 

we zullen ervoor zorgen dat ze alleen van toepassing zijn als het bezielen klas is toegevoegd aan de ouder :

.animeren. stroke-I stroke-dasharray: 80; animatie: write1 2s 1 gemak; 

Het resultaat zou redelijk dichtbij moeten zijn, probeer naar beneden te scrollen:

#signatuur width: 40%; opvulling: 2em 0; dekking: 0;  # signature.animate opacity: 1;