html - 如何在卷轴上绘制垂直线？

Question

我正在构建一个需要用线条“连接”每个部分的网站，这些线条应该在您向下滚动页面时绘制(就像这里显示的 https://codepen.io/tibsw6/pen/Beowex )

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

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  background: whitesmoke;
  font-size: 16px;
  font-family: Open Sans;
  height: 2000px;
}

h1 {
  background: cornflowerblue;
  font-size: 3em;
  color: whitesmoke;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10vh;
}

svg {
  position: fixed;
}

path {
  fill: none;
  stroke: palevioletred;
  stroke-width: 3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <h1>SVG line drawing on scroll</h1>
</header>
<svg class="" id="" width="100%" height="600" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 600">
    <path d="M 257.85024,158.16843 754.90716,35.953537 731.06035,405.57906 228.78695,448.8014 z"></path> 
    <path d="m 259.83736,136.30872 c 0,0 -6.74232,0.97288 -11.61303,5.46502 -3.96751,3.659 -6.12527,9.40831 -7.01729,20.86596 l -36.5158,346.77284 c 0,0 -3.47753,13.41382 10.68151,14.15903 l 517.67468,-21.11485 c 0,0 18.38216,0.74522 19.87257,-19.62369 L 784.07068,11.384991 c 0,0 0.059,-13.07475 -23.20111,-7.2266959 L 259.83736,136.30872 z"></path> 
    <path d="m 211.29271,522.89381 c 0,0 12.5259,6.63947 19.72988,5.64573 l 513.45197,-19.12737 c 0,0 18.87884,0.74557 21.61112,-18.87848 l 29.5596,-462.528221 c 0,0 1.49047,-10.184447 -13.54272,-21.4997553" ></path> 
    <path d="M 208.59466,472.34637 756.27723,432.02629" ></path> 
    <path d="m 591.36015,515.11602 11.15099,41.36862 c 0,0 8.62435,33.16197 -11.15099,33.16197 l -55.35924,4.26821 c 0,0 -9.65275,0.58387 -13.08781,0.58387 -1.35069,0 -5.16991,0.0265 -5.16991,0.0265 l -149.57016,-0.0347 c 0,0 -1.45726,0.12035 -1.52173,-0.0853 -0.14195,-0.4531 1.2173,-0.44973 1.2173,-0.44973 l 93.42473,-4.68143 c 0,0 23.85536,1.49042 23.85127,-27.57288 l -2.70885,-42.52741" ></path> 
    <path d="m 595.82547,514.94947 11.52956,43.3982 c 0,0 8.23944,32.78936 -11.52956,38.00586 h -58.52044 l -12.10971,0.99374 -16.58099,-0.61332 -128.7355,0.17849 c 0,0 -10.74373,-0.45795 -13.22753,-2.50727" ></path> 
    <path d="m 486.38703,90.292617 c -0.3846,2.126175 -1.9686,3.619643 -3.5379,3.335758 -1.5693,-0.283875 -2.5297,-2.237606 -2.1451,-4.363775 0.38461,-2.12617 1.96859,-3.619642 3.53789,-3.335762 1.56931,0.283879 2.52971,2.23761 2.14511,4.363779 z" ></path> 
    <path d="m 483.95449,571.8934 120.41968,0"></path> 
    <path d="m 783.49986,166.74023 -9.12881,133.48624" ></path> 
    <path d="m 773.91008,309.26031 -1.81646,29.43591"></path>
  </svg>

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

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

Answer 1

主要思想是:您需要一个用于连接器的 svg 元素。我正在使用 viewBox="0 0 100 100" 和 preserveAspectRatio ="none" 的 viewBox，这样我就可以根据需要拉伸(stretch) svg。

为了避免连接器因拉伸(stretch)而变形，我使用了 vector-effect:non-scaling-stroke;

这种动画是这样完成的:路径有一个 stroke-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>