Scroll Drawing

Developer
Chris Coyier
Size
2,913 Kb
Views
36,432
  1. Scroll Drawing Previews
  2. Scroll Drawing HTML Codes
  3. Scroll Drawing CSS Codes
  4. Scroll Drawing JS Codes

How do I make an scroll drawing?

As you scroll down, the % scrolled of the document is calculated and that same % of an SVG <path> is drawn.. What is a scroll drawing? How do you make a scroll drawing? This script and codes were developed by Chris Coyier on 03 November 2022, Thursday.

Scroll Drawing Previews
IQ Test

Scroll Drawing - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scroll Drawing</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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> <script src="js/index.js"></script>
</body>
</html>

Scroll Drawing - Script Codes CSS Codes

body { /* feel free to change height */ height: 5000px; background: -webkit-linear-gradient( top, orange, darkblue ); 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;
}

Scroll Drawing - Script Codes JS Codes

// 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; }
});
Scroll Drawing - Script Codes
Scroll Drawing - Script Codes
Home Page Home
Developer Chris Coyier
Username chriscoyier
Uploaded November 03, 2022
Rating 4.5
Size 2,913 Kb
Views 36,432
Do you need developer help for Scroll Drawing?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Coyier (chriscoyier) Script Codes
Name
Slider like Yahoo Weather App
Glowing Blue Inputs
Simple Flexbox Responsive Nav
Centering in the Unknown
Transformer Tabs
Row and Column Highlighting with CSS Only
Bookmarklet to make the text between 45 and 75 characters turn red.
Generate Mobile Version of Table
Pull Quote from NY Post
Vertical-align examples
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!