Question

所以我在构建垂直视差滚动网站时遇到了问题。

目前我使用ScrollMagic来创建视差区域，并且它完美无缺。当我尝试将内容置于其上时，问题就出现了。对于我的情况，我使用Bootstrap's .container，因此我可以将我的内容放在不同的行，列等中。

我可以看到这个缺陷，它在结构本身，但我试图找到一种方法来破解它，任何想法？

<!-- Main Container -->
<div id="fullpage">
<div class="spacer s0"></div>
<!-- Section -->
<div class="section">
    <div class="absolute main-wrapper container">

        <div class="row">
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi amet asperiores, illo sapiente, magni fuga distinctio quisquam tenetur error natus accusantium cum veniam voluptatem! Id qui at quas culpa facere.</p>
        </div>
    </div>

<div id="parallax1" class="parallaxParent">
<div style="background-image: url(img/bcg_slide-1.jpg);">
</div>
</div>
</div>
<!-- /Section -->
<!-- Section -->
<div class="spacer s1">
<div class="box2 blue">
<p>Content 1</p>
</div>
</div>
<!-- /Section -->
<!-- Section -->
<div class="spacer s0"></div>
<div class="section">
<div id="parallax2" class="parallaxParent">
<div style="background-image: url(img/bcg_slide-2.jpg);"></div>
</div>
</div>
<!-- /Section -->
<div class="spacer s1">
<div class="box2 blue">
<p>Content 2</p>
</div>
</div>
<div class="spacer s0"></div>
<!-- Section -->
<div class="section">
<div id="parallax3" class="parallaxParent">
<div style="background-image: url(img/bcg_slide-3.jpg);"></div>
</div>
</div>
<!-- /Section -->
</div>

因此，如果我将div放在背景视差图像之前，它会重叠视差图像，并创建一个带文本的白色容器。我已完成position absolute，但这意味着我无法使用bootstrap's grid。

我尝试使用视差背景放入div。

我很开心。

Answer 1

我实际上已经破解了它。这比我想象的要简单得多。

在我的代码中，我刚刚宣布了一个<div> position: absolute;，width: 100%;和z-index: 1;。

<div class="section">
  <div style="position: absolute; width: 100%; z-index: 1;">
    <div class="container">
      <div class="row">
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea fugiat officiis aspernatur deserunt molestias debitis placeat ratione fugit sed. Rem consectetur facilis maiores facere velit error eos quisquam dolorem aliquam.</p>
        </div>
      </div>
</div>
                <div id="parallax2" class="parallaxParent">
                    <div style="background-image: url(img/parallax_bg2.png);"></div>
            </div>
</div>

因此，这会在<div>的{{1}}之上创建一个带有视差图像的<div>。它已在多个部分进行了测试，并且可以正常工作。简单。咄...

ScrollMagic：如何将内容置于视差背景之上

1 个答案: