div内の複数の背景画像をテキストとともに縦方向にスクロールします

Question

この種の垂直スクロールを最も鈍い方法で作成するにはどうすればよいですか？私はこれをすべて間違って計画していると思う。

私は現在background-imageとdivを有し、（1）/（2）/等負位置決めおよび上部に固定されているdiv、より高いz-index有します。

私の考えは、各段落にJSリスナーを作成し、トリガーされたときに背景イメージを変更することでした。しかし、それは私がそれのようにスクロールアップするのを助けることはありませんので、私はそれについて間違った方法を行っていると思っています。

理想的には、パラグラフと同じ方法で画像をスクロールして、自然に見えるようにします。しかし、複数のdivをマスクで重ね合わせて表示することは、あまりにも狂っているようです。

Answer 1

だから私はこれを行うことができると思う方法：

あなたは、本質的にあなたがで...

背景画像を参照してください、そのウィンドウを作成したいのでZインデックスの何かで固定要素を作成します10のように、そしてあなたの画像をz-index 1でウィンドウの後ろに置いてください。次に、テキストのZ-インデックスを20に設定して、すべての上に表示します。ここで

は非常に基本的なスニペットです：

https://codepen.io/anon/pen/LzQrYa

コード：

<div class="container"> 

    <div class="cover top"></div> 
    <div class="cover right"></div> 
    <div class="cover bottom"></div> 
    <div class="cover left"></div> 
    <div class="bg-image one"></div> 
    <div class="bg-image two"></div> 
    <div class="bg-image three"></div> 

    <p class="text one">Text 1</p> 
    <p class="text two">Text 1</p> 
    <p class="text three">Text 1</p> 
</div> 

CSS：そこ

.container { 
    position: relative; 
    display: inline-block; 
    width: 100%; 
    float: left; 
} 
.container .cover { 
    position: fixed; 
    display: inline-block; 
    background-color: #ffffff; 
    z-index: 10; 
} 
.container .cover.top { 
    top: 0; left: 0; 
    width: 100%; 
    height: 120px; 
} 
.container .cover.right { 
    top: 0; right: 0; 
    width: 100px; 
    height: 100%; 
} 
.container .cover.bottom { 
    bottom: 0; left: 0; 
    width: 100%; 
    height: 120px; 
} 
.container .cover.left { 
    top: 0; left: 0; 
    width: 500px; 
    height: 100%; 
} 
.container .bg-image { 
    position: relative; 
    display: inline-block; 
    width: 100%; 
    height: 400px; 
    float: left; 
} 
.container .bg-image.one { background-color: #cccccc; } 
.container .bg-image.two { background-color: #8ec640; } 
.container .bg-image.three { background-color: #ff00ff; } 

.container .text { 
    position: absolute; 
    display: inline-block; 
    font-size: 40px; 
    color: #000000; 
    z-index: 20; 
} 
.container .text.one { 
    top: 40px; 
    left: 50px; 
} 
.container .text.two { 
    top: 500px; 
    left: 50px; 
} 
.container .text.three { 
    top: 940px; 
    left: 50px; 
} 

おかげ