Created
August 16, 2017 12:08
-
-
Save DevShahidul/e4f6bef1bab5c34f3a92303588e3a36f to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <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" /> | |
| Sorry, your browser does not support inline SVG. | |
| </svg> | |
| <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> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment