3

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.

Andrea Ligios
  • 49,480
  • 26
  • 114
  • 243
basikthings
  • 31
  • 2
  • Pretty cool effect..but a bit distracting. – sje397 Nov 20 '10 at 09:32
  • I think in principle something like this would be considered distracting, but in this example I can't say that I agree. The separation of content in this way gives greater hierarchy in data. A user will immediately know that the webpage layer is anchored by those white lines, the background is the clouds and icebergs. It wasn't an affect that begged for the users focus of attention either. I see your point though, I just wouldn't throw something like this out as a rule of thumb. It is a usability trade-off that deserves to be explored. – basikthings Nov 22 '10 at 09:24

1 Answers1

2

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'
        });
    }
});
nonopolarity
  • 146,324
  • 131
  • 460
  • 740