借鉴滚动曲线（响应）SVG路径 [英] Drawing Curved (Responsive) SVG Path on Scroll

问题描述

在四周的strokeDashArray招动画SVGs的嗡嗡声的读了后，我终于找到了code的一点​​点这种功能连接到用户的滚动位置上的电缆codeS 博客。

After reading up on all of the buzz around animating SVGs with the strokeDashArray trick I finally found a little bit of code to connect this functionality to the user's scroll position on the Cable Codes blog.

这想法是伟大的，但我有实际环在一个点上的波浪，弯曲的路径。所以我分了路径计算的总长度，以获得良好的中间地带，但仍低于与线滞后或走在前面的滚动。

This idea is great, but I have a wavy, curvy path that actually loops at one point. So I divided the calculated total length of the path to get a good middle ground but it still falls short with the line lagging behind or getting ahead as you scroll.

下面是一些调整片段的例子：

Here's an example of the snippet with some adjustments:

$(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 的路径和$片段C $ c。与我的调整。任何想法，我怎么能保持这一行的末尾在视口中的中心，当用户滚动？

I made a CodePen with the path and the snippet of code with my adjustments. Any ideas as to how I could keep the end of this line in the centre of the viewport as the user scrolls?

更新： SVG的是，事实上，反应灵敏。这改变了一些东西，不是吗？这里是更新codePEN 。

Updated: The SVG is, in fact, responsive. This changes a few things, eh? Here's an updated CodePen.

推荐答案

在你的计算百分之滚动有点注销的方式。我做了一个工作版本在这里：

The way you calculated your percent scroll was a bit off. I have made a working version here:

的http：//$c$cpen.io/anon/pen/idvoh

您需要通过从文档的高度减去窗口的高度，制定出scrollTop的最大值。

You need to work out the maximum value of scrolltop by subtracting the window height from the document height.

至于如何阻止它走在前面或落后时行曲折了很多。你需要空间你的线段有规律的高度。因此，举例来说，如果您的订单包括10个贝济耶，确保他们开始在该行的高度（约）N /十分之。这应该保持节奏是正确的。

As for how you stop it getting ahead or falling behind when the line twists and turns a lot. You need to space out your line segments at regular heights. So, for example, if your line consists of 10 beziers, make sure they start at (approximately) n/10ths of the height of the line. That should keep the pacing about right.

这篇关于借鉴滚动曲线（响应）SVG路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！