Hoe te tekenen tijdens het scrollen

Scrollend tekenen

Gebruik SVG en JavaScript om driehoeken te tekenen tijdens het scrollen - Let op, het moet zijn <path> Elementen:}

Voorbeeld

<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z"/>
</svg>
<script>
// Haal het <path> element met ID "triangle" op
var triangle = document.getElementById("triangle");
// Haal de lengte van het <path> element op
var length = triangle.getTotalLength();
// Startpositie van het tekenen (stel lijndash-modus in). Hier wordt de waarde ingesteld gelijk aan de lengte van het pad, wat eigenlijk betekent dat het hele pad als een 'grote lijn' wordt beschouwd.
triangle.style.strokeDasharray = length;
/* Stel de streepafstand in. Stel deze op het beginpunt van het tekenen (stel het lijndash-modus in). Hier wordt de waarde gelijk aan de lengte van het pad ingesteld, wat eigenlijk betekent dat het hele pad als een 'grote lijn' wordt beschouwd. */
Tijdens het scollen neemt deze offset geleidelijk af, waardoor de driehoek geleidelijk zichtbaar wordt.
Verwijder deze regel om de driehoek te tonen voordat de tekening begint te scollen.
triangle.style.strokeDashoffset = length;
// Luister naar het scrollen van het venster en roep de functie myFunction aan bij het scrolen.
window.addEventListener("scroll", myFunction);
function myFunction() {
  // Bereken scrollpercentage = (huidige scrollhoogte) / (totale scrollbare hoogte)
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // Bereken de te tekenen lengte = totale lengte * scrollpercentage
  var draw = length * scrollpercent;
  // Wanneer je omhoog scrolt, wordt het eigenlijk in de verkeerde richting getekend (van volledig naar onvolledig), dus hier gebruiken we de totale lengte min het te tekenen lengte.
  triangle.style.strokeDashoffset = length - draw;
}
</script>

Try it yourself

Related pages

Tutorial:SVG tutorial