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

【问题标题】：Parallax scroll, animation WITH scroll instead of activate on scroll视差滚动，滚动动画而不是在滚动时激活
【发布时间】：2014-04-15 03:41:13
【问题描述】：

我正在研究“视差滚动”样式的网页，我可以使用背景图像动画正确设置所有主要部分的样式，但是当我将其进一步分解为单独的 div 动画时，我会卡住。

示例：一旦浏览器滚动达到 900 像素，它就会激活一个 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 });  
    }
});

【问题讨论】：

标签： javascript jquery parallax

【解决方案1】：

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

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

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

您可以在此处调整position 的逻辑，以影响它何时移动、何时停止等。

【讨论】：

你有改变不透明度的技巧吗？我有点用你的技术来定位，但它不会淡入干净，它只会断断续续jsfiddle.net/WW8xF/2
不透明度应介于 0 和 1 之间。您需要使用不同的公式将值设为小数。像这样的东西：jsfiddle.net/WW8xF/3 虽然我只是编造了这个，没有真正的理由。您可以对其进行调整，并可能对其进行更改，使其更易于理解。