Imitation de surligner du texte avec un stylo

Ce codepen est inspiré du travail de Sten Hougaard

Préparations

Créons deux conteneurs pour différentes implémentations d'animation :

<div class="container">
 <h1>Animated text
  <svg viewbox="0 0 235 40" xmlns="http://www.w3.org/2000/svg" id="animated-svg">
   <path d="..."/>
  </svg>
 </h1>
</div>

<div class="container">
 <h1 id="clickable-header">Click on me!
  <svg viewbox="0 0 235 40" xmlns="http://www.w3.org/2000/svg" id="clickable-svg">
   <path d="..."/>
  </svg>
 </h1>
</div>

J'ai créé un svg à l'aide d'Adobe Illustrator, la caractéristique principale doit être une petite hauteur et une grande largeur.
Il est important de mentionner que svg est un enfant d'un élément d'en-tête puisque nous positionnerons svg par rapport à lui.

CSS

Nous transformons nos conteneurs en flexbox pour tout positionner gracieusement au centre.

.container {
 display: flex;
 place-content: center;
}

h1 {
 display: inline;
 position: relative;
}   

inline est utilisé pour simplement réduire la largeur de l'élément à son contenu puisque svg s'en servira

Ensuite, nous devons positionner svg par rapport à un en-tête :

svg {
 min-width: 110%;
 min-height: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}

Nous utilisons la méthode standard pour positionner l'élément relatif au centre du parent. Pour ajuster le svg au texte, nous devons appliquer min-width et min-height.

Logique d'animation avec javascript

Pour animer des éléments en javascript, nous pouvons utiliser la merveilleuse méthode d'animation (images clés, options).

Images clés

Disséquons la fonction getDrawingParameters, qui donne des propriétés sur lesquelles itérer :

const getDrawingParameters = (path) => {
 const length = path.getTotalLength();
 path.style.strokeDasharray = length;
 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];
 return drawingProperties;
};

---

Tout d'abord, nous devons savoir quelle est la longueur réelle de notre chemin, en utilisant la méthode svg getTotalLength:

const length = path.getTotalLength();

---

Maintenant, nous devrions utiliser notre longueur calculée pour simuler le dessin. Définissons notre point de départ. Nous avons besoin de l'attribut StrokeDasharray :

path.style.strokeDasharray = length;

Ici, on indique à cet attribut de tracer un chemin avec alternance d'un tiret (taille=longueur) et d'un espace (taille=longueur).

---

L'attribut suivant, où nous avons besoin de longueur, est Stroke-dashoffset :

path.style.strokeDashoffset = length;

Cette valeur indique que le calcul du tableau de tirets est extrait par valeur de longueur. Et puisque nous définissons notre tableau de tirets sur « dash-length gap-length dash-length gap-length… », le chemin de départ sera vide (gap).

---

Donc, nous définissons nos propriétés itérables dans un tableau :

 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];

Nous utilisons le décalage pour définir l'heure relative à laquelle cette propriété doit être atteinte. Il a été conçu pour imiter le retard à chaque itération.

Possibilités

Le deuxième argument de la méthode animer est les options :

animatedPath.animate(
 getDrawingParameters(animatedPath), 
 {duration: 10000, iterations: Infinity}
);

Nous réglons notre animation sur des itérations infinies et une durée de 10 secondes. Vous vous souvenez du décalage ? notre animation "active" ne prend que 1,5 seconde.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!