Scroll Drawing

Wir haben uns bereits die SVG-Linienzeichnung ausführlich angesehen. Es ist ein cleverer Trick, bei dem man gestrichelte Linien für den Strich verwendet, aber der Abstand im Strich ist so groß, dass er den gesamten Pfad abdeckt. Dann kann man ihn so bewegen, dass er den gesamten Pfad wieder abdeckt, was den Anschein erweckt, als würde er sich selbst zeichnen.

Mit ein wenig JavaScript können wir etwas ausgefallener werden und die Form fertig zeichnen, während die Seite nach unten gescrollt wird.

Demo

Siehe den Pen Scroll Drawing von Chris Coyier (@chriscoyier) auf CodePen.

Schritt 1: Holen Sie sich einen <path>

Es muss ein <path> sein. Jedes andere SVG-Element funktioniert nicht (z. B. <rect>). Sie können Elemente jedoch zu Pfaden erzwingen. Ich habe ein Lodge-Video dazu. Möglicherweise müssen Sie zu Tricks greifen, wie z. B. das Hinzufügen eines zusätzlichen Vektorpunkts entlang einer bereits geraden Kante.

In meiner Demo hier habe ich die Form einfach aus Illustrator kopiert und eingefügt.

Geben Sie dem Pfad eine ID, falls er keine hat

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100.6 107.6" id="star-svg">
  <path id="star-path" fill="none" stroke="black" stroke-width="2"  d=" ... " />
</svg>

Schritt 2: Ermitteln Sie die Länge dieses Pfads

// Get a reference to the <path>
var path = document.querySelector('#star-path');

// Get length of path... ~577px in this demo
var pathLength = path.getTotalLength();

Schritt 3: Verstecken Sie die Form, indem Sie den Strich versetzen

// Make very long dashes (the length of the path itself)
path.style.strokeDasharray = pathLength + ' ' + pathLength;

// Offset the dashes so the it appears hidden entirely
path.style.strokeDashoffset = pathLength;

Schritt 4: Wenn die Seite gescrollt wird, verschieben Sie den Strich um den gleichen Betrag wie % gescrollt

// When the page scrolls...
window.addEventListener("scroll", function(e) {
 
  // What % down is it? 
  var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
    
  // Length to offset the dashes
  var drawLength = pathLength * scrollPercentage;
  
  // Draw in reverse
  path.style.strokeDashoffset = pathLength - drawLength;
  
});

Schritt 5: Wenn bis zum Ende gescrollt wurde, entfernen Sie die Strichelung

Wenn Sie dies *nicht* tun, sieht die Form nicht ganz so sauber/scharf aus, als wenn Sie überhaupt keine Strichelung anwenden würden.

Ich bin mir nicht sicher warum. Ich glaube nicht, dass Sie die Zahlen anpassen können, um das zu beheben. Aber es ist einfach genug zu entfernen.

  // ... at bottom of scrolling function

  // When complete, remove the dash array, otherwise shape isn't quite sharp
  if (scrollPercentage >= 0.99) {
    path.style.strokeDasharray = "none";
  } else {
    path.style.strokeDasharray = pathLength + ' ' + pathLength;
  }

Die 0,99 dienen dazu, Fuzzy-Mathematik auszugleichen. Manchmal erhält man aus der Division keine perfekte 1,0.

---

Sehen Sie eine Vollbild-Demo.