私はフォルゲ+ニコルで見られる効果の種類を達成したい

Question

の下に配置された主な内容を明らかにするのdivのスクロールを作る - 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/

お返事ありがとうございました！