Question

在阅读了有关使用strokeDashArray技巧制作SVG动画的所有动态之后，我终于找到了一些代码来将此功能连接到用户在Cable Codes博客上的滚动位置。

这个想法很棒，但我有一条波浪曲线的路径实际上在一个点上循环。因此，我将计算出的路径总长度除以得到一个良好的中间地带，但是当你滚动时，它仍然落后于线路或前进。

以下是一些带有一些调整的代码段示例：

$(document).ready(function(){

  $(window).scroll(function() {
    drawLine( $('#route'), document.getElementById('path') );
  });

  //draw the line
  function drawLine(container, line){

    var pathLength = line.getTotalLength(),
        distanceFromTop = container.offset().top - $(window).scrollTop(),
        percentDone = 1 - (distanceFromTop / $(window).height()),
        length = percentDone * pathLength / 30;

    line.style.strokeDasharray = [ length ,pathLength].join(' ');
  }

});

我使用路径和代码片段进行了CodePen调整。有关如何在用户滚动时如何将此行的结尾保持在视口中心的任何想法？

更新：事实上，SVG是响应式的。这改变了一些事情，嗯？这是an updated CodePen。

Answer 1

你计算百分比滚动的方式有点偏。我在这里制作了一个工作版本：

http://codepen.io/anon/pen/idvoh

您需要通过从文档高度减去窗口高度来计算scrolltop的最大值。

至于如何阻止它在线路迂回曲折时前进或落后。您需要在常规高度处将线段分开。因此，例如，如果您的线由10个贝塞尔曲线组成，请确保它们从线的高度的（大约）n / 10th开始。这应该保持正确的节奏。

在滚动上绘制曲线（响应）SVG路径

1 个答案: