Comment dessiner en défilant

Dessiner en défilant

Utiliser SVG et JavaScript pour dessiner des triangles lors du défilement - Veuillez noter qu'il doit être <path> Élément :

Exemple

<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z"/>
</svg>
<script>
// Obtenir l'élément <path> avec l'ID "triangle"
var triangle = document.getElementById("triangle");
// Obtenir la longueur de l'élément <path>
var length = triangle.getTotalLength();
// Position de départ du dessin (réglage du mode de pointillés. Ici, il est réglé sur une valeur égale à la longueur du chemin, ce qui signifie que l'ensemble du chemin est perçu comme une "ligne de pointillés".).
triangle.style.strokeDasharray = length;
/* Définir la décalage de la ligne de pointillés. Au début, il est réglé sur la longueur du chemin, ce qui permet de décaler l'ensemble du chemin hors de la vue, cachant ainsi le triangle.
Avec le défilement, cette valeur de décalage diminue progressivement, révélant ainsi progressivement le triangle.
Supprimer cette ligne de code peut afficher le triangle avant le dessin de défilement.
triangle.style.strokeDashoffset = length;
// Écouter l'événement de défilement de la fenêtre et appeler la fonction myFunction lors du défilement.
window.addEventListener("scroll", myFunction);
function myFunction() {
  // Calculer le pourcentage de défilement = (hauteur de défilement actuelle) / (hauteur totale de défilement possible)
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // Calculer la longueur à dessiner = longueur totale * pourcentage de défilement
  var draw = length * scrollpercent;
  // Lorsque le défilement vers le haut a lieu, il s'agit en réalité de dessiner en sens inverse (de complet à incomplet), donc ici on soustrait la longueur totale à la longueur à dessiner.
  triangle.style.strokeDashoffset = length - draw;
}
</script>

Essayez-le vous-même

Pages liées

Tutoriel :Tutoriel SVG