jQuery在屏幕上滚动动画div并返回

Question

我试图重新创建我在另一个网站上看到的东西Ben the Bodyguard，我只是想知道它是如何完成的，我知道它是某种循环，但我不确定如何去做。

基本上，它是在火车经过在屏幕的一部分。这

http://benthebodyguard.com/index.php

如果你看我做了什么，它只是到某一点，然后回来，我怎么能得到它，所以它沿着屏幕，然后再回来..？

http://jsfiddle.net/VWqyw/2/

Answer 1

你可以做这样的事情：

http://jsfiddle.net/pGvgc/2/

$(document).ready(function(){ 

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

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

基本上只是使用垂直滚动位置调整块的水平位置。顺便说一句，如果你计划在网页上做很多动画，可能值得考虑使用类似于KineticJS这样的JavaScript库，类似的东西可以让你相对容易地做一些很棒的事情......

Answer 2

我相信你正在寻找的东西是这样的：

$(document).ready(function(){ 

    $(window).scroll(function(){ 
     if($(window).scrollTop() > 480 && $(window).scrollTop() < 900){ 
      $("#block").css({ "left": $(window).scrollTop() - 480 }); 
     };  
    }); 
});​ 

这是一个给定的范围