Question

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

我用来实现此功能的主要内容是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;
}

背景图片相互遮盖，但固定文字仍固定在页面上（再次参见fiddle）。

有没有办法用CSS解决这个问题？或者我是否必须做一些令人讨厌的jquery窗口滚动监控？

Answer 1

认为你想使用position：absolute而不是position：固定在'.parallax .title'类

Answer 2

既然您正在使用jQuery，为什么不尝试使用http://stephband.info/jparallax/这样的插件？

编辑：对于移动应用，您可能需要查看Skrollr。它是纯粹的Javascript，并且在＃34;野外＆＃34;中有一些非常好的例子。部分。

它可以帮助你重新发明轮子。

Answer 3

以下是两个教程（均使用Skrollr.js），这可能有助于其他人尝试创建类似的视差滚动效果。

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

3 个答案: