How to Scroll layers with multiple rate on website

问题

I found this website with an effect that I would like to replicate. To see what I am talking about go here:

http://www.rowtothepole.com/

When scrolling through the webpage you can see that the iceberg layer scrolls at a different rate as the text box on top of it. I would like to know how they are doing this.

回答1:

In their http://www.rowtothepole.com/release/includes/js/parallax.js

there are code to shift the body's background image and an outer div's background image, which are for the icebergs and for the clouds:

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'
        });
    }
});

来源：https://stackoverflow.com/questions/4231979/how-to-scroll-layers-with-multiple-rate-on-website