Cara menggunakan CSS untuk mencapai efek parallax scrolling dan jitter

 <gaya>
    .index-module--nftBox--3H_AP {
        tinggi: 200vh;
        pengulangan latar belakang: tidak ada pengulangan;
        ukuran latar belakang: sampul;
        posisi latar belakang: 50%;
        lebar: 100%;
    }
    .index-module--moto--3sEm1 {
        posisi: mutlak;
        kiri: 0;
        atas: -400px; /*titik tetap posisi inisialisasi model mobil*/
        gambar latar belakang: url(https://resource.nreal.cn/web/images/home/motuo.png);/*gambar mobil*/
        transisi: 0,5 detik;
        -transformasi webkit: terjemahkan(0);
        transformasi: terjemahkan(0);
    }
    .index-module--moto--3sEm1.is-active{ /*Efek jitter model mobil*/
        animasi: lompat .1 detik kemudahan masuk 5 bergantian;
    }
    @keyframes jump {/*Efek jitter pada model mobil*/
        dari { atas: -30 piksel }
        ke { atas: 6 piksel }
    }
    .index-module--moto--3sEm1, .index-module--nftBox--3H_AP {
        tinggi: 200vh;
        pengulangan latar belakang: tidak ada pengulangan;
        ukuran latar belakang: sampul;
        posisi latar belakang: 50%;
        lebar: 100%;
    }
    .index-module--title--rSrVs {
        opacity: 1;
        lebar: 80%;
        margin: 0 otomatis;
    }
    .index-module--titleBox--1VS2L {
        tinggi: 50vh;
        tampilan: fleksibel;
        justify-content: tengah;
        menyelaraskan-item: tengah;
        posisi: mutlak;
        atas: 0;
        kiri: 50%;
        -transformasi webkit: terjemahkan(-50%);
        transformasi: terjemahkan(-50%);
    }
    .hoZaHW {
        nama animasi: ewofWB;
        durasi animasi: 300ms;
        jumlah-iterasi-animasi: tak terbatas;
        transform-origin: pusat tengah;
        status-putar-animasi: berjalan;
    }
    /* @keyframes ewofWB {
        0% { kiri:0 piksel; atas:0 piksel;}
    25% { kiri:200 piksel; atas:0 piksel;}
    50% { kiri:200px; atas:200px;}
    75% { kiri:0 piksel; atas:200 piksel;}
    100% { kiri:0 piksel; atas:0 piksel;}
    } */
    .index-module--nftTitle--20OyY {
        lebar: 100%;
        lebar maksimal: 800 piksel;
    }
    .index-module--duang--5jpDr {
        -webkit-animasi: indeks-modul--circleP--3P-V7 1.3s;
        animasi: modul-indeks--circleP--3P-V7 1,3 detik;
        -transformasi webkit: terjemahkanY(400px);
        transformasi: terjemahkanY(400px);
    }
    .index-module--moto--3sEm1 {
        posisi: mutlak;
        kiri: 0;
        -transformasi webkit: terjemahkan(0);
        transformasi: terjemahkan(0);
    }  
    </gaya>

 <div id="layout-container" class="konten">
        <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--rSrVs indeks-modul--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>

 <skrip tipe="teks/javascript">
    jendela.onscroll= fungsi(){
            //Variabel t adalah jarak dari atas ketika bilah gulir bergulir var t = document.documentElement.scrollTop||document.body.scrollTop;
            var scrollup = document.getElementById('scrollup');
            //Saat menggulir ke 200px dari atas if(t>=200){ scrollup.style.backgroundImage="url(https://resource.nreal.cn/web/images/home/motuo.png)";
                scrollup.style.top=6+"px";  
                if(scrollup.style.top == '6px'){
                   document.getElementById("scrollup").classList.add("aktif")
                }
            }else{//Kembali ke scrollup.style.backgroundImage="url(https://resource.nreal.cn/web/images/home/motuo.png)" normal;
                scrollup.style.top=-400+"px";
                document.getElementById("scrollup").classList.remove("is-aktif")
            }
    }
</skrip>