如何在网站上以多个速率滚动图层 [英] 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.

推荐答案

在他们的 http://www.rowtothepole.com/release/includes/js/parallax.js

有代码移动身体的背景图像和外部的div的背景图像，这是为冰山和云：

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

这篇关于如何在网站上以多个速率滚动图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！