我正在尝试复制“本保镖”网站出名的效果。
具体来说,当垂直滚动页面时,我试图让精灵图像在屏幕上水平移动。所以这是一个两步效果:
- 水平滚动
- 动画精灵(这是他们使用的那个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()});
});
});
但我不明白如何控制滚动的开始和停止,更重要的是,如何动画精灵动态改变背景位置。