javascript - 每行文本的不同速度

Question

我正在尝试为带有文本的许多不同 div 做视差效果。所以每一行在滚动时都会有不同的速度。我正在尝试使用此功能，但线条会进行“跳跃”运动，而不是仅以较慢的速度滚动。我错过了什么吗？感谢您的任何建议！

window.addEventListener("scroll", function(e) {
  const target = document.querySelectorAll('.linea');
  var index = 0,
    length = target.length;

  for (index; index < length; index++) {
    var pos = window.pageYOffset * target[index].dataset.speed*0.05;
    target[index].style.transform = 'translateY(' + pos + 'px)';
  }
});

HTML：

<div class="linea" data-speed="2"> line of text 1 </div>
<div class="linea" data-speed="1"> line of text 2 </div>
<div class="linea" data-speed="4"> line of text 3 </div>

标签： javascriptparallax