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