Cara Membuat Scroll Drawing dengan SVG dan Javascript
Untuk orang-orang yang memendam rindu, mencintai pada diam, karenanya apa-apa yang ditunjukkannya hanyalah bagai gunung es di pada samudera, hanya memperlihatkan pucuk kecil dari betapa besar perasaan itu di bagian dalamnya. Besarrr sekali yang tersembunyi. Oke di kesempatan kali ini saya akan berbagi ilmu kepada kalian mengenai bagaimana Cara Merancang Scroll Drawing dengan SVG dan Javascript.
Scroll drawing, kadang kita dikerjakan bingung, dan menimbulkan pertanyaan seperti “bagaimana sih cara merancang seperti ini?” itu. Nah disini saya akan memberitahukan Cara Merancang Scroll Drawing dengan SVG dan Javascript. Berikut caranya:
Seperti lazim, 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 bagi 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? Lumayan gampang bukan?
Sekianlah bagi panduan kali ini mengenai Cara Merancang Scroll Drawing dengan SVG dan Javascript.
Semoga bermanfaat, terima kasih
Sumber https://kursuswebsite.org
