ScrollMagic：如何在視差背景上放置內容

所以我在建立一個垂直視差滾動網站時遇到了問題。ScrollMagic：如何在視差背景上放置內容

目前我使用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。

我打開想法。

來源

2016-02-10 Andrejs Gubars

我實際上破解了它。這比我想象的要簡單得多。

在我的代碼中，我剛剛宣佈<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>頂部創建一個<div>。它已經過多個部分的測試，並且可以正常工作。簡單。呃...

來源

2016-02-10 20:12:53

ScrollMagic：如何在視差背景上放置內容

回答

相關問題