CSS 完全な視差スクロール効果

セクション {
    高さ：100vh;
}

.g-img {
    背景画像: url(...);
    背景添付: 固定;
    背景サイズ: カバー;
    背景の位置: 中央 中央;
}

<スタイル>
div {
            高さ：100vh;
            背景: rgba(0, 0, 0, .7);
            色: #fff;
            行の高さ: 100vh;
            テキスト配置: 中央;
            フォントサイズ: 20vh;
        }

        .a-img1 {
            背景画像: url(https://images.pexels.com/photos/1097491/pexels-photo-1097491.jpeg);
            背景添付: 固定;
            背景サイズ: カバー;
            背景の位置: 中央 中央;
        }

        .a-img2 {
            背景画像: url(https://images.pexels.com/photos/2437299/pexels-photo-2437299.jpeg);
            背景添付: 固定;
            背景サイズ: カバー;
            背景の位置: 中央 中央;
        }

        .a-img3 {
            背景画像: url(https://images.pexels.com/photos/1005417/pexels-photo-1005417.jpeg);
            背景添付: 固定;
            背景サイズ: カバー;
            背景の位置: 中央 中央;
        }
</スタイル>
 <div class="a-text">1</div>
    <div class="a-img1">2</div>
    <div class="a-text">3</div>
    <div class="a-img2">4</div>
    <div class="a-text">5</div>
    <div class="a-img3">6</div>
    <div class="a-text">7</div>

<スタイル>
    html{
        オーバーフロー: 非表示;
        高さ: 100%
    }

    体 {
        /* 視差要素の親には 3D パースペクティブが必要です */
        パースペクティブ: 1px;
        変換スタイル: 3D を保持します。
         高さ: 100%;
        overflow-y: スクロール;
        オーバーフロー-x:非表示;
    }
    ＃アプリ{
        幅：100vw;
        高さ:200vh;
        背景:スカイブルー;
        パディング上部:100px;
    }
    。1つ{
        幅:500ピクセル;
        高さ:200px;
        背景:#409eff;
        変換: translateZ(0px);
        下部マージン: 50px;
    }
    。二{
        幅:500ピクセル;
        高さ:200px;
        背景:#67c23a;
        変換: translateZ(-1px);
        下部マージン: 150px;
    }
    。三つ{
        幅:500ピクセル;
        高さ:200px;
        背景:#e6a23c;
        変換: translateZ(-2px);
        下部マージン: 150px;
    }
</スタイル>
<div id="アプリ">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
</div>