滚动线动画-HTML，CSS，JS [英] Scroll Line Animation - HTML,CSS,JS

问题描述

我正在尝试使用SVG线条动画输出字母 H ，但我只能停留在某一部分，我不确定在哪里编辑/修改元素，因此它会输出字母H .我想通过 SVG滚动绘图输出此图像:

I am trying to output the letter H using the SVG Line Animation and I am stuck at one part, I am not sure where to edit/modify the elements so it outputs the Letter H. I want to output this image by SVG Drawing On Scroll:

似乎有点太复杂了，起初我尝试修改< path 元素，但得到了另一个意外的输出.我使用了来自Codepen的 SVG滚动绘图模板，我想进行修改以在 scroll 上方输出图像.我想知道我是否可以在这方面得到一些帮助.有什么建议吗?

It seems a bit too complicated and my attempt at first was to modify the <path elements but I got a different unexpected output. I used the SVG Drawing On Scroll template from codepen, and I would like to modify to output the image above on scroll. I was wondering if I could get some assistance on this. Any suggestions?

模板代码:

// 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;
  }
  
});

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;
}



Resources

<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>

推荐答案

您需要在SVG编辑器(例如 Inkscape)中跟踪图片.

You need to trace your picture in an SVG editor like Inkscape.

安装Inkscape，导入图片，然后使用线"或节点"工具以尽可能少的点跟踪轮廓.然后保存SVG，并在内部查找路径.

Install Inkscape, import your picture, then use the Line or Node tools to trace the outline with as few points as possible. Then save the SVG and look inside for the path.

经过简化，这是我最终得到的路径: M 0,0 V 66 H 13 V 37 H 40 V 66 H 53 V 0 H 40 V 26 H 13 V 0 Z

Here is the path I ended up with, after simplification: M 0,0 V 66 H 13 V 37 H 40 V 66 H 53 V 0 H 40 V 26 H 13 V 0 Z

这是带有更新路径的示例代码:

And here is your example code with the updated path:

// 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;
  }
  
});

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;
}



Resources

<h1>Scroll-to-draw</h1>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 250" id="star-svg">
  <path fill="none" stroke="white" stroke-width="2" id="star-path" d="M 0,0 V 66 H 13 V 37 H 40 V 66 H 53 V 0 H 40 V 26 H 13 V 0 Z"/>
</svg>

这篇关于滚动线动画-HTML，CSS，JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！