javascript - 当用户滚动时沿着曲线路径移动元素

Question

我正在尝试创建一个页面，在该页面中，当用户滚动时，火箭会沿着预定路径蜿蜒向上(页面将在底部加载)。

我可以使用类似 jQuery.path 的方式为路径上的元素设置动画并使用 SVG 的 animateMotion，但我无法完全找出一个解决方案，让元素在用户滚动时沿着该路径移动。

jQuery 滚动路径并不是我想要的，因为它将元素移动到页面的中心。

我在 TEDxGUC 上看到过网站，当您向下滚动时，他们会沿着弯曲的路径移动苹果。我可以看到他们正在使用 Raphael.js 和“沿路径的动画”扩展，但我仍然无法理解他们实际上是如何实现它的——我还不是一个 JS 忍者。

非常感谢任何指向正确方向的指示!

编辑

对于仍然对这种事情感兴趣的人，我偶然发现了 Skrollr Path ，这几乎完全符合我的要求:example

Answer 1

我是 www.tedxguc.com 网站的开发者。

关于我如何使动画与滚动一起工作，我认为您已经走上了正确的道路(双关语)。我简单地将动画概念化，就好像滚动条是视频播放器中的搜索栏一样。

所以我将页面的高度设置为动画的长度，这样我的元素每移动 1 个像素对应动画中的 1 毫秒，就好像我在时间轴中移动一样。

您会注意到 homepage.js 末尾的动画设置代码文件。

在 makeAnim() 中你会发现很多代码看起来像这样

setAnim(obj.apple,{0:{along:0}, 1000:{along:1}}, start+3200, 1000);

这基本上做的是:设置苹果，使其从 0(路径开始)移动到 1(路径结束)，并且它将在滚动的 1000 像素内移动 从动画的“开始”+ 3200 像素的偏移量开始。

我有点作弊并稍微修改了代码以使其更易于理解。

这是一个 jsfiddle早期概念的开发，我希望我的评论有所帮助。