如何在滚动条上绘制垂直线？

Question

我正在建立一个站点，该站点需要用线条“连接”每个部分，当您向下滚动页面时，这些线条应该画出（就像这里显示的https://codepen.io/tibsw6/pen/Beowex）

code

import numpy as np

leading = np.array([814, 935, 1057, 3069])

within = np.array([193, 207, 243, 251, 273, 286, 405, 427, 696, 770, 883,
                   896, 1004, 2014, 2032, 2033, 2046, 2066, 2079, 2154])

# find first following elements in within array
first_after_leading = []
for _ in leading:
    temp = (within - _).max()

    first_after_leading.append(temp)

# convert to np array
first_after_leading = np.array(first_after_leading)

var path = document.querySelectorAll('path'),
  percentScroll;

$(path).each(function() {
  this.style.strokeDasharray = this.getTotalLength();
  this.style.strokeDashoffset = this.getTotalLength();
});

window.onscroll = function() {
  percentScroll = window.pageYOffset / (document.body.offsetHeight - window.innerHeight)

  $(path).each(function() {
    this.style.strokeDashoffset = Math.floor(this.getTotalLength() * (1 - percentScroll));
  });
};

我真的不知道它是如何工作的，我知道可以使用CSS和SVG来完成。

我正在尝试做这样的事情：

Answer 1

主要思想是：连接器需要一个svg元素。我正在使用viewBox="0 0 100 100"和preserveAspectRatio ="none"的viewBox，以便可以根据需要拉伸svg。

为了避免连接器因拉伸而变形，我使用矢量效果：非缩放描边；

这种动画的制作方法是这样的：路径具有笔划-dasharray，其中的破折号和间隙与路径的总长度一样长。 stroke-dashoffset也等于路径的总长度。这意味着在开始时您会看到“间隙”。在移动嘴轮时，减小了笔划偏移量，然后开始看到线条。

我希望这就是你的要求。

const svg = document.querySelector("svg");
let l = 188;//the total length of the paths
var dasharray = l;
var dashoffset = l;
//set the stroke-dasharray and the stroke-dashoffset for the paths
svg.style.strokeDasharray = dasharray;
svg.style.strokeDashoffset = dashoffset;

wrap.addEventListener("wheel",

  (e)=>{
    
    e.preventDefault();
    //e.deltaY is the vertical movement
    if (dashoffset > 0 && e.deltaY > 0 || 
        dashoffset < l && e.deltaY < 0) {
        //using e.deltaY would have been too fast. I'm using e.deltaY/10 to change the paths's stroke-dashoffset
        dashoffset -= e.deltaY/10;
    }
    
   //limiting the value of dashoffset
   if(dashoffset < 0)dashoffset = 0;
   if(dashoffset > l)dashoffset = l;
   //reset the stroke-dasharray and the stroke-dashoffset for the paths
    svg.style.strokeDashoffset = dashoffset;
  }, false);

article,
section {
  width: 100%;
  padding: 2em;
  text-align: center;
  border: 1px solid;
  margin: 0 0 5em 0;
  box-sizing: border-box;
  background: #d9d9d9;
}

#articles {
  display: flex;
  margin: 0;
  width: 100%;
  padding: 0;
  justify-content: space-between;
}
article {
  flex: 0 1 50px;
  margin: 0;
}

#wrap {
  margin:0 auto;
  width: 365px;
  position: relative;
}

svg {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  vector-effect:non-scaling-stroke;
}


path{
  fill:none;
  stroke:black;
  

}

<div id="wrap">  
<svg viewBox="0 0 100 100" preserveAspectRatio ="none">
  <path d="M50,0V60L0,100" />
 <path d="M50,0V60L100,100" />  
</svg>
<section id="el1">section 1</section>
<section id="el2">section 2</section>
<div id="articles"><article id="el3">article1</article><article id="el4">article2</article></div>
</div>