6

我正在尝试制作一个页面，其中火箭遵循预定路径，当用户滚动时，该路径会蜿蜒向上（页面将在底部加载）。

我可以使用jQuery.path之类的东西并使用 SVG 的 animateMotion 沿路径为元素设置动画，但我无法完全弄清楚当用户滚动时元素将沿该路径移动的解决方案。

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

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

任何指向正确方向的指针都将不胜感激！

编辑

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

4

2 回答 2

10

我是 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，我希望我的评论有所帮助。

于 2013-02-15T16:20:46.417 回答
0

您必须创建采用 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
}
于 2013-02-14T16:43:43.057 回答