jquery - 滚动时沿路径移动背景图像位置

Question

这是我的第一篇文章，如果内容不完美，我深表歉意。

本质上，我试图达到与红牛飞行艺术电影网站上出色利用的相同或相似的效果:

http://artofflightmovie.com/

即当用户向下滚动页面时背景图像沿着坐标路径移动。我现在不担心内容动画，只担心背景动画。

我能够做基本的工作，将背景从 a 动画移动到 b 动画，但我不知道当我想从 b 到 c、c 到 d 等等时该怎么做

我尝试过使用公开可用的:

$('.bg').scroll(function(){
   var x = $(this).scrollTop();
   $(this).css('background-position','0% '+parseInt(-x/10)+'px');
});

这允许我在用户滚动时设置背景位置变化，但我不确定如何设置下一个动画。我最初的想法是使用 else if，但这并不成功。

artofflightmovie.com 示例设置了一组背景位置 px 测量值，然后像时间线一样读取这些测量值。

我对我想要的 CSS 很满意，但是我对 jQuery 的了解还没有达到可以克服我遇到的问题的水平。

我还获取了“飞行艺术”页面的源代码，并尝试创建一个简化版本来构建，但同样没有多大效果。

任何帮助，我们将不胜感激

Answer 1

感谢大家的意见。

我实际上在这里找到了我想要的东西:http://joelb.me/scrollpath/

很棒的 jQuery 插件，它使用 canvas 元素来渲染路径，并用 jQuery 控制沿着它的滚动。事件/函数也可以在每个路径点触发。