Cara Membuat Scroll Drawing Pada Website

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti February 20, 2021

Di bawah ini kita akan mempelajari cara menggambar saat mengscroll website dengan menggunakan JavaScript dan SVG.

Scroll Drawing

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  height: 2000px;
  background: #f1f1f1;
}

#mySVG {
  position: fixed;
  top: 15%;
  width: 400px;
  height: 210px;
  margin-left:-50px;
}
</style>
</head>
<body>

<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" />
 Maaf, browser Anda tidak mendukung SVG sebaris.
</svg>

<script>
// Dapatkan id dari elemen <path> dan panjang <path>
var triangle = document.getElementById("triangle");
var length = triangle.getTotalLength();

// Posisi awal gambar
triangle.style.strokeDasharray = length;

// Sembunyikan segitiga dengan mengimbangi tanda hubung. Hapus garis ini untuk menunjukkan segitiga sebelum menggambar scroll
triangle.style.strokeDashoffset = length;

// Temukan persentase scroll pada scrolling (menggunakan properti lintas-browser), dan tanda hubung offset dengan jumlah yang sama seperti persentase gulir
window.addEventListener("scroll", myFunction);

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

  var draw = length * scrollpercent;

  // Membalik gambar (saat mengscroll ke atas)
  triangle.style.strokeDashoffset = length - draw;
}
</script>

</body>
</html>

Gunakan SVG dan JavaScript untuk menggambar segitiga pada layar website yang di scroll – gunakan elemen <path>:

Contoh

<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z"/>
</svg>

<script>
// Dapatkan id dari elemen <path> dan panjang <path>
var triangle = document.getElementById("triangle");
var length = triangle.getTotalLength();

// Posisi awal gambar
triangle.style.strokeDasharray = length;

// Sembunyikan segitiga dengan mengimbangi tanda hubung. Hapus garis ini untuk menunjukkan segitiga sebelum menggambar scroll
triangle.style.strokeDashoffset = length;

// Temukan persentase scroll pada scrolling (menggunakan properti lintas-browser), dan tanda hubung offset dengan jumlah yang sama seperti persentase gulir
window.addEventListener("scroll", myFunction);

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

  var draw = length * scrollpercent;

  // Membalik gambar (saat mengscroll ke atas)
  triangle.style.strokeDashoffset = length - draw;
}
</script>