CSS を使用して視差スクロールとジッター効果を実現する方法

 <スタイル>
    .index-module--nftBox--3H_AP {
        高さ: 200vh;
        背景リピート: リピートなし;
        背景サイズ: カバー;
        背景位置: 50%;
        幅: 100%;
    }
    .index-module--moto--3sEm1 {
        位置: 絶対;
        左: 0;
        top: -400px; /*車モデル初期位置固定小数点*/
        背景画像: url(https://resource.nreal.cn/web/images/home/motuo.png);/*車の写真*/
        トランジション: 0.5秒。
        -webkit-transform: 翻訳(0);
        変換: 変換(0);
    }
    .index-module--moto--3sEm1.is-active{ /*車種のジッター効果*/
        アニメーション: ジャンプ .1 秒イーズインアウト 5 代替。
    }
    @keyframes ジャンプ {/*自動車モデルのジッター効果*/
        { 上: -30px } から
        { トップ: 6px } へ
    }
    .index-module--moto--3sEm1、.index-module--nftBox--3H_AP {
        高さ: 200vh;
        背景リピート: リピートなし;
        背景サイズ: カバー;
        背景位置: 50%;
        幅: 100%;
    }
    .index-module--title--rSrVs {
        不透明度: 1;
        幅: 80%;
        マージン: 0 自動;
    }
    .index-module--titleBox--1VS2L {
        高さ: 50vh;
        ディスプレイ: フレックス;
        コンテンツの位置揃え: 中央;
        整列項目: 中央;
        位置: 絶対;
        トップ: 0;
        左: 50%。
        -webkit-transform: 変換(-50%);
        変換: 変換(-50%);
    }
    .hoZaHW {
        アニメーション名: ewofWB;
        アニメーション期間: 300ms;
        アニメーション反復数: 無限;
        変換原点: 中心中心;
        アニメーション再生状態: 実行中;
    }
    /* @keyframes ewofWB {
        0% { 左:0px; }
    25% {左:200ピクセル;}
    50% { 左:200ピクセル; 上:200ピクセル;}
    75% { 左:0px; 上:200px;}
    100% { 左:0px; }
    } */
    .index-module--nftTitle--20OyY {
        幅: 100%;
        最大幅: 800ピクセル;
    }
    .index-module--duang--5jpDr {
        -webkit-animation: インデックスモジュール--circleP--3P-V7 1.3s;
        アニメーション: インデックス モジュール --circleP--3P-V7 1.3 秒;
        -webkit-transform：translateY(400px);
        変換：translateY(400px);
    }
    .index-module--moto--3sEm1 {
        位置: 絶対;
        左: 0;
        -webkit-transform: 翻訳(0);
        変換: 変換(0);
    }  
    </スタイル>

 <div id="レイアウトコンテナ" class="content">
        <div class="index-module--nftBox--3H_AP" style="background-image:url(https://resource.nreal.cn/web/images/home/motuobg.jpg)">
            <div class="index-module--nftBox--3H_AP"></div>
            <div class="index-module--moto--3sEm1" id="scrollup"></div>
            <div class="index-module--title--rSrVsindex-module--titleBox--1VS2L">
                <div dur="300" class="sc-bdVaJa hoZaHW">
                    <img src="https://resource.nreal.cn/web/images/home/title.png" class="index-module--nftTitle--20OyY">
                </div>
            </div>
        </div>
</div>

 <script type="text/javascript">
    window.onscroll= function(){
            //変数 t は、スクロール バーがスクロールしているときの上端からの距離です。 var t = document.documentElement.scrollTop||document.body.scrollTop;
            varscrollup = document.getElementById('scrollup');
            //上から200pxまでスクロールする場合 if(t>=200){scrollup.style.backgroundImage="url(https://resource.nreal.cn/web/images/home/motuo.png)";
                スクロールアップ.スタイル.トップ=6+"ピクセル";  
                if(scrollup.style.top == '6px'){
                   document.getElementById("scrollup").classList.add("is-active")
                }
            }else{//通常に戻るscrollup.style.backgroundImage="url(https://resource.nreal.cn/web/images/home/motuo.png)";
                スクロールアップ.スタイル.トップ=-400+"ピクセル";
                document.getElementById("scrollup").classList.remove("is-active")
            }
    }
</script>