Pet*_*kin 6 javascript svg scroll
我正在尝试制作一个页面,当用户滚动时,火箭沿着预定的路径跟随页面(页面将在底部加载).
我可以使用类似jQuery.path和使用SVG的animateMotion 为路径中的元素设置动画,但我无法找到一个解决方案,当用户滚动时元素将沿着该路径移动.
jQuery Scroll Path不是我想要的,因为它将元素移动到页面的中心.
我在TEDxGUC网站上看到,当你向下滚动时,它们沿着弯曲的路径移动苹果.我可以看到他们正在使用Raphael.js和"沿着路径延伸的动画"扩展但是我仍然无法理解他们实际上是如何实现它的 - 我还不是一个JS忍者.
任何指向正确方向的人都会非常感激!
编辑
对于那些仍然对这种事情感兴趣的人,我偶然发现了Skrollr Path,它几乎完全符合我的要求:例子
Amr*_*raz 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在发展较早的概念,我希望我的评论帮助.