移动和滚动垂直

Question

我试图复制的“奔的保镖”网站提出了著名的效果时，水平动画精灵。

具体来说，我想有一个精灵图像在屏幕上垂直滚动页面时水平移动。所以这是一个两步的效果：

• 水平滚动
• 动画精灵（这是他们正在使用http://benthebodyguard.com/images/thiefsprite.png一）

我设法复制页“原样”本地但每当我试图定制它，我失去了一些功能或动画变得超级怪异。

搜索在这里SO，我发现这个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]，我已经决定，如果在动画中使用。也许它可以帮助你也与你的滚动动画。精灵动画，至少对我来说，这将是多一点，虽然，因为我有一个更复杂的道路，字符必须遵守！