滚动线动画 - HTML,CSS,JS

Posted 2023-05-08

【中文标题】滚动线动画 - HTML,CSS,JS

【英文标题】：Scroll Line Animation - HTML,CSS,JS

【发布时间】：2021-04-29 21:32:58

【问题描述】：

我正在尝试使用 SVG 线条动画输出字母 H，但我被困在一个部分，我不确定在哪里编辑/修改元素，因此它输出字母 H。我想通过SVG Drawing On Scroll输出这张图片：

这似乎有点太复杂了，我最初的尝试是修改 <path 元素，但我得到了一个不同的意外输出。我使用了来自 codepen 的SVG Drawing On Scroll 模板，我想修改以输出上面的图像滚动。我想知道我是否可以在这方面得到一些帮助。有什么建议吗？

模板代码：

// 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://***.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- 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 也由单个路径组成时才有效。你能分享你的svg文件吗？

仅此而已，我没有任何 SVG 文件。

在收到解决问题的有用答案后删除问题通常被认为是非常粗鲁的行为。 ***.com/q/65894707

【参考方案1】：

您需要在像 Inkscape 这样的 SVG 编辑器中跟踪您的图片。

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

经过简化后，这是我最终得到的路径： 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

这是您的示例代码，其中包含更新的路径：

// 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://***.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- 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>