Cara Membuat Scroll Drawing dengan SVG dan Javascript

Bagi orang-orang yang memendam rindu, mencintai dalam diam, maka apa-apa yang ditunjukkannya hanyalah bagai gunung es di dalam samudera, hanya memperlihatkan pucuk kecil dari betapa besar perasaan itu di bagian dalamnya. Besarrr sekali yang tersembunyi. Oke pada kesempatan kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Membuat Scroll Drawing dengan SVG dan Javascript.

Scroll drawing, kadang kita dibuat bingung, dan menimbulkan pertanyaan seperti “bagaimana sih cara membuat seperti ini?” itu. Nah disini saya akan memberitahukan Cara Membuat Scroll Drawing dengan SVG dan Javascript. Berikut caranya:

Seperti biasa, terlebih dahulu siapkan file index.html nya.

Kemudian isi di bagian <body> tag-tag HTML berikut.

<h2>Scroll down this window to draw a triangle.</h2>
<p>Scroll back up to reverse the drawing.</p>

<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z" />
  Sorry, your browser does not support inline SVG.
</svg>

Dan isi bagian CSS nya, seperti berikut.

body {
  height: 2000px;
  background: #f1f1f1;
}

#mySVG {
  position: fixed;
  top: 15%;
  width: 400px;
  height: 210px;
  margin-left:-50px;
}

Yang terakhir isi untuk Javascript nya.

<script>
// Get the id of the <path> element and the length of <path>
var triangle = document.getElementById("triangle");
var length = triangle.getTotalLength();

// The start position of the drawing
triangle.style.strokeDasharray = length;

// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
triangle.style.strokeDashoffset = length;

// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);

function myFunction() {
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

  var draw = length * scrollpercent;
  
  // Reverse the drawing (when scrolling upwards)
  triangle.style.strokeDashoffset = length - draw;
}
</script>

Bagaimana teman-teman? Cukup mudah bukan?

Sekian untuk tutorial kali ini tentang Cara Membuat Scroll Drawing dengan SVG dan Javascript.

Semoga bermanfaat, terima kasih

Cara Membuat Scroll Drawing dengan SVG dan Javascript

Kategori