"draw a svg on scroll "
Bootstrap 4.1.1 Snippet by Hoss

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h1>Scroll down this page to draw a triangle.</h1> <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> </div> </div>
body { height: 3000px; } #mySVG { position: fixed; top: 30%; width: 400px; height: 210px; }
// 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; }

Related: See More


Questions / Comments: