视差滚动，动画使用滚动而不是在滚动时激活

Question

我正在潜入'Parallax scroll'风格的网页，我可以使用背景图像动画正确设置所有主要部分的样式，但是当我将其分解为单独的div动画时，我会陷入困境。

示例：一旦浏览器滚动到达900px，它就会激活一个div来从左边开始动画。它一直滑到位。我想要完成的是动画由用户完全滚动控制（仅滚动动画）。希望这是有道理的

小提琴：http://jsfiddle.net/WW8xF/

HTML

<section id="one"></section>
<section id="two">

    <div class="contentBox">I am a box</div>

</section>

的jQuery

$(window).scroll(function(){
    if($(window).scrollTop()<500) {
        $('.contentBox').stop().animate({ left: -500 }, { duration: 500 });
    } else {            
        $('.contentBox').stop().animate({ left: 100 }, { duration: 500 });  
    }
});

Answer 1

在这种情况下，您不想使用animate，您希望根据窗口的滚动位置自行控制元素的位置。像这样：

http://jsfiddle.net/WW8xF/1/

$(window).scroll(function(){
    var position = Math.min($(window).scrollTop()-700, 100)
    $('.contentBox').css({ left: position });
});

你可以在这里调整position的逻辑来影响移动时间，停止位置等等。