开发者

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开发者_JAVA技巧. 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'
        });
    }
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜