Hur man ritar vid rullning

Rullande ritning

Använd SVG och JavaScript för att rita trianglar vid rullning - observera att det måste vara <path> Element:}}

Exempel

<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å <path>-elementets längd
var length = triangle.getTotalLength();
// Startposition för ritt (ställ in stroboskopisk modell. Här sätts till samma värde som vägslängden, vilket faktiskt gör hela vägen till en "stor stroboskopisk linje".)
triangle.style.strokeDasharray = length;
/* Ställ in stroboskopisk avstånd. Initialt sätts till vägslängden, vilket gör att hela vägen avviker från vyn och döljer triangeln.
Med rullning minskar denna avstånd gradvis, vilket gradvis visar triangeln.
Radera denna rad kan visa triangeln innan rullning ritas.
triangle.style.strokeDashoffset = length;
// Lyssna på fönstrets rullningshändelse och anropa myFunction-funktionen vid rullning.
window.addEventListener("scroll", myFunction);
function myFunction() {
  // Beräkna rullningsprocent = (nuvarande rullningshöjd) / (totalt rullningsutrymme)
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // Beräkna den att rita längden = total längd * rullningsprocent
  var draw = length * scrollpercent;
  // När man rullar upp, ritar det faktiskt baklänges (från full till ofullständigt), så här används total längd minus den att rita längden.
  triangle.style.strokeDashoffset = length - draw;
}
</script>

Prova själv

Relaterade sidor

Tutorial:SVG-tutorial