问有没有办法在DIV中实现视差？

EN

是的，这是可能的。

正如你可能知道的那样，正常的视差效果只是将一张bg图像放在body标签上，并在滚动时改变其背景偏移量，或者在其上移动一些div，速度比滚动速度慢。

由于您希望在每个窗口中都有单独的图像，因此需要使用背景偏移方法。在CSS中，每个div都是这样的：

#div1 {
    background: url('/ui/div1bg.jpg') 0 -800px no-repeat;
}

0 -800px就是background-position。当窗口向下滚动时，您希望通过逐渐增加第二个值来向下移动背景，以模拟透视。在模拟的视角中，较远的物体缓慢地从你身边经过，较近的物体移动得很快。

因此，您只需获取scroll事件：

$(window).scroll(function () {
    parallax();
});

收集您将使用的指标：

function parallax() {
    var ev = {
        scrollTop: document.body.scrollTop || document.documentElement.scrollTop
    };
    ev.ratioScrolled = ev.scrollTop / (document.body.scrollHeight - document.documentElement.clientHeight);
    render(ev);
}

并呈现更改：

function render(ev) {
    var t = ev.scrollTop;
    var y = Math.round(t * 2/3) - 800;
    $('#div1, #div2, #div3').css('background-position', '0 ' + y + 'px');
}

因此，随着t变量的增加(用户向下滚动)，图像会以2/3的速率移动。它从-800px开始，一旦用户向下滚动到1200px，它就会逐渐变为0。如果页面长度超过1200px，并且元素仍然可见，则必须调整数学运算，因为在此之后，代码将滚动经过图像顶部。如果到那个时候它们已经超过了元素，那么你可以忽略它。

显然，您应该调整那里的数字，以获得适合您的div和图像的效果。

如果你想把它建立在总页面高度上，不管它是什么，你可以使用上面的第二个指标.ratioScrolled，如下所示：

var y = Math.round((1 - ev.ratioScrolled) * -100);

因此，举个例子，如果你有一个高度为150px的div和一个高度为250px的图片，上面的图片将完美地工作-它从-100px开始(向上移动)，当页面滚动时，无论它有多长，它都会以0px结束(没有移位-所以底部的100px被裁剪了)。