垂直滚动时水平移动和动画精灵

Question

我正试图复制“保镖”网站所着名的效果。

具体来说，当我垂直向上滚动页面时，我试图让精灵图像在屏幕上水平移动。所以这是一个两步效应：

• 水平滚动
• 为精灵设置动画（这是他们使用的http://benthebodyguard.com/images/thiefsprite.png）

我设法在本地“按原样”复制页面，但每当我尝试自定义它时，我会失去一些功能，或者动画变得非常奇怪。

在这里搜索我发现了http://jsfiddle.net/pGvgc/2/

$(document).ready(function(){

var windowWidth = $(window).width();    
$("#block").css({ "right": windowWidth}); 

$(window).scroll(function(){       
    $("#block").css({ "right":  windowWidth  - $(window).scrollTop()});
});
});

但我不明白如何控制滚动的开始和停止，更重要的是，如何动画精灵动画来动态改变背景位置。

Answer 1

我尝试做类似于benthebodyguard的事情，并且我试图找到最好的解决方案。到目前为止，我已尝试过scrollpath，skrollr和crspline等脚本。但是我最近发现了raphael.js，基于这个[jsfiddle]，我决定使用if作为动画。也许它可以帮助你滚动动画。精灵动画，至少对我来说，它会更多一点，因为我有一个更复杂的道路，角色必须遵循！