How to scroll multiple bid layers on a website

Question

I found this site with an effect that I would like to reproduce. To find out what I'm talking about, go here:

http://www.rowtothepole.com/

When scrolling through a web page, you can see that the iceberg layer scrolls at a different speed in the form of a text field on top of it. I would like to know how they do it.

Answer 1

At http://www.rowtothepole.com/release/includes/js/parallax.js

There is a code for shifting the background image of the body and the external background image of the div, which are for icebergs and for 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'
        });
    }
});