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

时间:2014-04-14 19:35:40

标签: javascript jquery parallax

我正在潜入'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 });  
    }
});

1 个答案:

答案 0 :(得分:2)

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

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

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

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