About
Explore
Events & Classes
Support Us
Join
Sign In
JUSTCodaborate
View Project Page
Run
Fullscreen
Drawing on Scroll
HTML
CSS
JS
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h2>Drawing On Scroll</h2> <svg id="mySVG"> <path fill="none" stroke="purple" stroke-width="5" id="triangle" d="M150 0 L75 200 L225 200 Z" /> Sorry, your browser does not support inline SVG. </svg> </body> </html>
body { height: 2000px; background: #f1f1f1; } #mySVG { position: fixed; top: 15%; width: 400px; height: 210px; margin-left:-50px; }
// 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; }
About
Explore
Events & Classes
Support Us
Join
Sign In
