Web视差滚动背景图像和文本

Question

问题的要害：http://jsfiddle.net/Vy365/3/

我试图在页面上创建具有视差滚动效果的部分。

我用来实现这一点的主要CSS是背景图像的background-attachment: fixed，图像顶部的文本的position: fixed。

我有多个div，页面上有这样的效果，我希望每个部分都能掩盖前面的内容。

HTML:

<section>
    <div id="parallax-1" class="parallax">
        <div class="title">
            <h1>Fixed Text 1</h1>
        </div>
    </div>
</section>

<section class="scrolling-content">Scrolling Content</section>

<section>
    <div id="parallax-2" class="parallax">
        <div class="title">
            <h1>Second Fixed Text</h1>
        </div>
    </div>
</section>

<section class="scrolling-content">Scrolling Content</section>

CSS:

.parallax {
    margin: 0 auto;
    padding: 0;
    position: relative;
    width: 100%;
    max-width: 1920px;
    height: 200px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50% 0;
    z-index: 1;
}

.parallax .title {
    position: fixed;
    top: 80px;
}

#parallax-1 {
    background-image: url(http://placekitten.com/500/200);
}

#parallax-2 {
    background-image: url(http://placekitten.com/500/202);
}

.scrolling-content {
    position: relative;
    width: 100%;
    height: 200px;
    background: #ffffff;
    z-index: 2;
}

背景图像适当地掩盖了彼此，但是固定的文本仍然固定在页面上(再次请参阅小提琴)。

有办法用CSS来解决这个问题吗？还是我必须做一些令人讨厌的jquery窗口滚动监视？

Answer 1

认为您希望在“.parallax.title”类上使用“位置:绝对”而不是“位置”：

Answer 2

这里有两个教程(都使用Skrollr.js)，可以帮助其他尝试创建类似视差滚动效果的人。

• 如何创建视差滚动网站
• 简单视差滚动教程