Come disegnare durante lo scorrimento

Disegno di scorrimento

Utilizzare SVG e JavaScript per disegnare triangoli durante lo scorrimento - Attenzione, deve essere <path> Elemento:}}

Esempio

<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z"/>
</svg>
<script>
// Ottieni l'elemento <path> con ID "triangle"
var triangle = document.getElementById("triangle");
// Ottieni la lunghezza dell'elemento <path>
var length = triangle.getTotalLength();
// Posizione di partenza del disegno (imposta il modello a tratteggio. Qui viene impostato un valore uguale alla lunghezza del percorso, di fatto considerando l'intero percorso come un "grande tratteggio".).
triangle.style.strokeDasharray = length;
/* Imposta l'offset a tratteggio. All'inizio viene impostato sulla lunghezza del percorso, facendo sì che l'intero percorso venga spostato fuori dalla vista, nascondendo così il triangolo.
Con lo scorrimento, questa offset si riduce gradualmente, mostrando gradualmente il triangolo.
Eliminare questa riga di codice può mostrare il triangolo prima del disegno di scorrimento.
triangle.style.strokeDashoffset = length;
// Ascolto l'evento di scorrimento della finestra e chiamo la funzione myFunction quando si scorre.
window.addEventListener("scroll", myFunction);
function myFunction() {
  // Calcolo la percentuale di scorrimento = (altezza di scorrimento corrente) / (altezza totale scrollabile)
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // Calcolo la lunghezza da disegnare = lunghezza totale * percentuale di scorrimento
  var draw = length * scrollpercent;
  // Quando scivolo verso l'alto, è come disegnare all'indietro (dalla completa all'incompleta), quindi qui uso la lunghezza totale minus la lunghezza da disegnare.
  triangle.style.strokeDashoffset = length - draw;
}
</script>

Prova tu stesso

Pagine correlate

Tutorial:Tutorial SVG