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

Parallax scroll, animation WITH scroll instead of activate on scroll

本文关键字：滚动 激活 动画 WITH 视差      更新时间：2023-09-26

我正在深入"视差滚动"风格的网页，我可以用背景图像动画正确地设置我的所有主要部分的样式，但当我将其进一步分解为单个div动画时，我会陷入困境。

示例：一旦浏览器滚动到900px，它就会激活一个div，从左边开始设置动画。它一路滑入到位。我试图实现的是，动画完全由用户滚动控制（仅在滚动时设置动画）。希望这是有意义的

Fiddle：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 });  
    }
});

在这种情况下，您不想使用animate，您需要根据窗口的滚动位置自己控制元素的位置。类似这样的东西：

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

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

您可以在此处调整position的逻辑，以影响其移动的时间、停止的位置等。

相关文章：