讓一個div滾動出來，露出其下面放置

Question

主要內容我想實現在弗勒+尼科爾看到的效果類型 - http://fordenicol.com/

我想最初的div滾動了，才揭示的主要內容下面，並能夠繼續向下滾動頁面。我已經查看了各種可以在線獲得的揭示和頁腳顯示，但是當嘗試繼續滾動瀏覽內容時，固定高度會導致問題。

https://jsfiddle.net/3gkazmb8/2/

HTML

<div class="overlay"></div> 

<div class="content"> 

<p>Content Information</p> 

</div> 

</body> 

CSS

body { 
padding-bottom: 600px; 
} 
.overlay { 
height: 1200px; 
position: relative; 
z-index: 2; 
background: red; 
} 

.content { 
height: 1800px; 
position: fixed; 
left: 0; 
right: 0; 
bottom: 0; 
background-image: url(http://lorempixel.com/g/400/200/); 
background-color: #000; 
z-index: 1; 
} 

.content p{ 
color: yellow; 
font-size: 50px; 
padding-top: 500px; 
} 

這是佈局和我多麼希望達到的效果是一般的想法，但固定的高度和div的位置導致內容被隱藏。

任何幫助將不勝感激。

Answer 1

在這裏，我們走了， 滾動魔術是我在過去使用的真棒插件，

使用與GSAP動畫庫，你將有流暢的動畫。

的教程中的鏈接。我已 http://scrollmagic.io/examples/basic/section_wipes_natural.html

Answer 2

終於到了那裏。不幸的是，它不完全可能與CSS，所以不得不恢復使用插件窗簾實現過渡 - http://curtains.herokuapp.com/

謝謝大家的回覆！