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

背景图片可以适当地覆盖在一起，但是固定文本仍然停留在页面上（再次参见fiddle）。

有没有用CSS修复这个问题的方法？还是我必须使用一些讨厌的jQuery窗口滚动监视？

- dougmacklin

Answer 1

你可能希望在'.parallax .title'类上使用position:absolute而不是position:fixed。

- Nagra

Answer 2

既然你已经在使用 jQuery，为什么不尝试像 http://stephband.info/jparallax/ 这样的插件呢？

编辑：对于移动应用程序，您可能想要检查一下 Skrollr。 它是纯JavaScript，并且“现场”部分有一些非常好的示例。

它可以帮助您避免重复造轮子。

- Sablefoste

---

有没有好的方法可以让插件与简单的背景图像+文本一起工作？它似乎想做很多我不想要的事情，比如跟踪鼠标等，我担心这可能不兼容移动设备。 - dougmacklin

这个插件在移动端滚动方面存在问题。我更新了Skrollr链接，它可以很好地与移动应用程序配合使用。 - Sablefoste

Answer 3

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

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

- Ihatetomatoes