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

Question

我发现这个网站的效果我想复制一下。要看看我在说什么，请到这里：

http://www.rowtothepole.com/

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

Answer 1

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

中

有代码可以移动身体的背景图像和外部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'
        });
    }
});