Hvordan man tegner ved rulning

Rulningstegning

Brug SVG og JavaScript til at tegne triangler ved rulning - bemærk, det skal være <path> Element:}}

Eksempel

<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z"/>
</svg>
<script>
// Få <path>-elementet med ID "triangle"
var triangle = document.getElementById("triangle");
// Få længden på <path>-elementet
var length = triangle.getTotalLength();
// Startposition for tegningen (sæt stregmode. Her sættes til samme værdi som stien længde, hvilket faktisk gør hele stien til en 'stor streg'.)
triangle.style.strokeDasharray = length;
/* Indstil stregafstand. Sæt indledningsvis til stien længde, så hele stien bliver afbrudt ud af synet, hvilket skjuler trekanten.
Med rulning vil denne afstand gradvist blive mindre, hvilket gradvist viser trekanten.
Slet denne linje kode kan vise trekanten før tegningen af rulningen.
triangle.style.strokeDashoffset = length;
// Overvåg vinduets rulningsevent og kald myFunction-funktionen, når der rulles.
window.addEventListener("scroll", myFunction);
function myFunction() {
  // Beregn rulningsprocent = (den nuværende rulningshøjde) / (den samlede rulningshøjde)
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // Beregn den længde, der skal tegnes = den samlede længde * rulningsprocent
  var draw = length * scrollpercent;
  // Når der rulles opad, er det faktisk en modvirkende tegning (fra fuld til utilfredsstillende), så her bruges den samlede længde minus den længde, der skal tegnes.
  triangle.style.strokeDashoffset = length - draw;
}
</script>

Prøv det selv

Relaterede sider

Tutorial:SVG tutorial