As you scroll down, the % scrolled of the document is calculated and that same % of an SVG <path>
is drawn.
A Pen by Chris Coyier on CodePen.
<h1>Scroll-to-draw</h1> | |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100.6 107.6" id="star-svg"> | |
<path fill="none" stroke="white" stroke-width="2" id="star-path" d="M43.7,65.8L19.9,83.3c-2.9,1.9-5.1,3.2-7.9,3.2c-5.7,0-10.5-5.1-10.5-10.8 | |
c0-4.8,3.8-8.2,7.3-9.8l27.9-12L8.8,41.4c-3.8-1.6-7.3-5.1-7.3-9.8c0-5.7,5.1-10.5,10.8-10.5c2.9,0,4.8,1,7.6,3.2l23.8,17.4 | |
l-3.2-28.2c-1-6.7,3.5-12,9.8-12c6.3,0,10.8,5.1,9.8,11.7L57,41.8l23.8-17.4c2.9-2.2,5.1-3.2,7.9-3.2c5.7,0,10.5,4.8,10.5,10.5 | |
c0,5.1-3.5,8.2-7.3,9.8L63.9,53.8l27.9,12c3.8,1.6,7.3,5.1,7.3,10.1c0,5.7-5.1,10.5-10.8,10.5c-2.5,0-4.8-1.3-7.6-3.2L57,65.8 | |
l3.2,28.2c1,6.7-3.5,12-9.8,12c-6.3,0-10.8-5.1-9.8-11.7L43.7,65.8z"/> | |
</svg> |
// Get a reference to the <path> | |
var path = document.querySelector('#star-path'); | |
// Get length of path... ~577px in this case | |
var pathLength = path.getTotalLength(); | |
// Make very long dashes (the length of the path itself) | |
path.style.strokeDasharray = pathLength + ' ' + pathLength; | |
// Offset the dashes so the it appears hidden entirely | |
path.style.strokeDashoffset = pathLength; | |
// Jake Archibald says so | |
// https://jakearchibald.com/2013/animated-line-drawing-svg/ | |
path.getBoundingClientRect(); | |
// When the page scrolls... | |
window.addEventListener("scroll", function(e) { | |
// What % down is it? | |
// https://stackoverflow.com/questions/2387136/cross-browser-method-to-determine-vertical-scroll-percentage-in-javascript/2387222#2387222 | |
// Had to try three or four differnet methods here. Kind of a cross-browser nightmare. | |
var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight); | |
// Length to offset the dashes | |
var drawLength = pathLength * scrollPercentage; | |
// Draw in reverse | |
path.style.strokeDashoffset = pathLength - drawLength; | |
// When complete, remove the dash array, otherwise shape isn't quite sharp | |
// Accounts for fuzzy math | |
if (scrollPercentage >= 0.99) { | |
path.style.strokeDasharray = "none"; | |
} else { | |
path.style.strokeDasharray = pathLength + ' ' + pathLength; | |
} | |
}); |
As you scroll down, the % scrolled of the document is calculated and that same % of an SVG <path>
is drawn.
A Pen by Chris Coyier on CodePen.
body { | |
/* feel free to change height */ | |
height: 5000px; | |
background: linear-gradient( | |
to bottom, | |
orange, | |
darkblue | |
); | |
} | |
h1 { | |
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; | |
font-weight: 300; | |
color: white; | |
text-transform: uppercase; | |
text-align: center; | |
font-size: 22px; | |
letter-spacing: 5px; | |
font-weight: 100; | |
padding: 25px 15px; | |
text-shadow: 1px 1px 1px #333; | |
} | |
#star-svg { | |
position: fixed; | |
top: 50%; | |
left: 50%; | |
width: 150px; | |
height: 150px; | |
margin: -75px 0 0 -75px; | |
} |