javascript - 如何在网站上以多种速率滚动图层

Question

我发现此网站具有我想要复制的效果。要查看我在说什么，请转到此处:

http://www.rowtothepole.com/

当滚动浏览网页时，您可以看到冰山层以与其顶部的文本框不同的速度滚动。我想知道他们是怎么做到的。

Answer 1

在他们的 http://www.rowtothepole.com/release/includes/js/parallax.js

有一些代码可以移动 body 的背景图像和外部 div 的背景图像，它们用于冰山和云:

Event.observe(window, "scroll", function() {
    var offset = document.viewport.getScrollOffsets();

    $(document.body).setStyle({
      'backgroundPosition': 'center -' + (offset[1] / px_scroll_amt) + 'px'
    });

    if (xhr_support) {
        $("outer").setStyle({
          'backgroundPosition': 'center -' + (offset[1] / (px_scroll_amt / 3)) + 'px'
        });
    }
});