Question

我正在尝试创建一个页面，当用户滚动时，火箭会沿着预定的路径跟随页面（页面将在底部加载）。

我可以使用jQuery.path之类的东西使用SVG的animateMotion为路径中的元素设置动画，但我无法找到一个解决方案，当用户滚动时元素将沿着该路径移动。

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

我在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（路径的终点），它将在1000px的滚动范围内完成从动画的“开始”开始+偏移3200像素。

我有点欺骗并修改了一些代码，以便更容易理解。

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

Answer 2

你必须创建你的公式，它取y值并计算x，但这就是我想出来的......

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

HTML

<div id="oh" style="background-color:red;height:100px;width:100px;position:fixed"></div>
<div style="height:25000px;width:20px;background-color:#000033">&nbsp;</div>

JS

var $w = $(window);
var $d = $('#oh');
$w.scroll(function(){
  $d.css('left',formula400())
});
function formula400(){
  return Math.sin($w.scrollTop()/100)*100
}

用户滚动时沿弯曲路径移动元素

2 个答案: