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

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');
});

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

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

我对CSS的要求不错，但是我对jQuery的了解并没有达到我能解决的问题。

我还采用了飞行艺术页面的来源，并试图创建一个简化版本，但再次没有用。

任何帮助，将不胜感激

Answer 1

感谢输入人员。

我实际上发现了我在此之后的那种事：http://joelb.me/scrollpath/

很棒的jQuery插件，它使用canvas元素呈现路径，jQuery控制它的滚动。事件/功能也可以在每个方向点触发。