Question

我希望在我的网站中实现一些视差效果，允许三个不同大小（高度）的div以不同的速度滚动，同时到达其容器的底部。我正在寻找 最简单 的方法来实现这一目标。我已经设法找到一个能够处理两个不同div的小脚本，但是我在更改脚本以补偿第三个div时遇到了麻烦。

Here's my code.如果您需要更好地了解我要完成的工作，请查看使用类似方法的 this site 。

我现在正在使用左右div，我只需要帮助让中间div与其他两个一样工作。

随时编辑我的code pen。我也不反对使用不同的脚本，这看起来很简单，我开始使用它。如果你有更好的东西，请告诉我。

Answer 1

试试这个：代码笔的更新版本：http://codepen.io/anon/pen/GvCif

Answer 2

我制作了一个我之前用过的东西的紧凑版本来实现这个结果。也许你觉得这很有用

<强> Demo here

var lastScrollTop = 0;
var leftPane = $('#leftPane').position();
var rightPane = $('#rightPane').position();

$(window).scroll(function(event){
    var st = $(this).scrollTop();
    $('#leftPane').css({top: leftPane.top + st*.4});
    $('#middlePane').css({top: rightPane.top + st*.2});
    $('#rightPane').css({top: rightPane.top + st*.8});
    lastScrollTop = st;
});

三个不同高度的div同时到达底部

2 个答案: