移動和滾動垂直

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]，我已經決定，如果在動畫中使用。也許它可以幫助你也與你的滾動動畫。精靈動畫，至少對我來說，這將是多一點，雖然，因爲我有一個更復雜的道路，字符必須遵守！