Signer sur la ligne pointillée terminer votre animation avec des points de repère

Dans le tutoriel précédent, nous avons animé une signature SVG en utilisant CSS. C'est un très bon effet, donnant l'impression que les mots sont écrits juste à l'écran. Dans ce tutoriel, nous allons plus loin et utilisons des points de cheminement pour déclencher l'animation lorsque nous choisissons.

Le problème

Notre signature animée n'est pas parfaite - l'effet d'écriture commence lorsque la page est chargée, même si le fichier SVG est au bas de la page, à l'abri des regards. Idéalement, nous aimerions que la signature s'anime dès qu'elle apparaît pour la première fois..

Pour cela, nous devons utiliser JavaScript et un peu d'aide de la bibliothèque Waypoints. Les points de cheminement vont détecter quand notre signature défile dans la vue, à quel point nous allons ajouter une classe à la élément et, ce faisant, déclenche l'animation.

8. Ajouter du contenu de remplissage

Pour commencer, ajoutez une charge de paragraphes et du texte pour compléter le haut de la page et poussez notre signature hors de la fenêtre d'affichage. Nous ajouterons également quelques styles génériques pour simplifier le tout:

body padding-top: 20px; largeur: 90%; largeur maximale: 580px; marge: 0 auto; couleur: # 263238;  p taille de la police: 16px; hauteur de ligne: 1,5; marge: 0 0 1,5 um;  #signature width: 40%; rembourrage: 2em 0; 

Points bonus!

J'ai utilisé une police de caractères brillante appelée BLOKK Neue. Il s'agit d'un ajout stylistique remarquable à notre démo et attire l'attention sur notre signature. Si vous le souhaitez, téléchargez la police et utilisez-la vous-même.

p font-family: "BLOKKNeue-Regular", serif; taille de police: 16px; hauteur de ligne: 1,5; marge: 0 0 1,5 um; 

Pour plus d'informations sur l'utilisation des polices Web, consultez Figuring Out @ font-face de Jeremy Loyd..

9. Apportez Waypoints.js

Exceptionnellement pour moi, je ne vais pas m'appuyer sur jQuery. Waypoints 3.0 a introduit une version entièrement gratuite du framework, je vais donc oser et l'utiliser. Si vous préférez la syntaxe jQuery, ou si jQuery est déjà connecté à votre projet pour d'autres raisons et le trouve plus facile à utiliser, utilisez un autre fichier de points de route et modifiez le code que nous écrivons en conséquence.

Dans tous les cas, récupérez le fichier, accédez-y à partir de votre document HTML (ou de votre panneau CodePen JS) et installez-vous confortablement avec une tasse de café pendant cinq minutes..

Pointer vers le SVG

Nous devons dire aux points de passage de notre , alors prenons-le et assignons-le à la variable ma signature:

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

Maintenant, nous instancions la classe Waypoint, alors ajoutez l’extrait suivant au volet JS dans CodePen (ou dans > balises au bas de votre document HTML si vous faites les choses de cette façon).

Nous devons nous assurer que nous passons notre ma signature au élément option (pour qu’il sache quel élément il surveille) et s’assurer que le gestionnaire l'option est définie. Le gestionnaire est l'endroit où nous dictons ce qui se passe lorsque le waypoint est déclenché.

var mySignature = document.getElementById ('signature'); var waypoint = nouveau waypoint (element: mySignature, gestionnaire: function (direction) )

Bas de la fenêtre

Le code ci-dessus déclenchera «quelque chose» lorsque le haut de notre L'élément frappe en haut de la fenêtre. Nous avons besoin du waypoint à déclencher lorsque le bas de la frappe au bas de la fenêtre, autrement dit, quand il est complètement défilé dans la vue. Pour cela, nous pouvons utiliser les décalages de points de cheminement. Les décalages nous permettent de spécifier exactement quand nous voulons qu'un élément déclenche une action. Dans notre cas, nous voulons utiliser: offset: "vue de dessous" comme ça:

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

Gestionnaire

Enfin, nous devons spécifier ce qui va se passer lorsque le waypoint est déclenché. Nous voulons un cours (animer) à ajouter à notre et cette classe sera ce que nous attachons à nos animations. Les animations ne commenceront donc à jouer qu'une fois la classe ajoutée. Nous ajouterons mySignature.classList.add ('animate') à la fonction de gestionnaire, nous donnant un script complet qui ressemble à ceci:

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

10. Utilisation .animer dans notre CSS

Rappelez-vous toutes ces règles où nous avons défini les animations? Nous allons obtenir un peu plus précis. Au lieu d'avoir:

.accident vasculaire cérébral-I accident vasculaire cérébral-dasharray: 80; animation: write1 2s 1 soulagement; 

nous allons faire chacun appliquer uniquement lorsque le animer la classe a été ajoutée au parent :

.animer. Couper-I stroke-dasharray: 80; animation: write1 2s 1 soulagement; 

Le résultat devrait être assez proche, essayez de faire défiler vers le bas:

#signature width: 40%; rembourrage: 2em 0; opacité: 0;  # signature.animate opacity: 1;