Comment utiliser CSS pour obtenir des effets de défilement de parallaxe et de gigue

 <style>
    .index-module--nftBox--3H_AP {
        hauteur : 200vh ;
        répétition d'arrière-plan : pas de répétition ;
        taille de l'arrière-plan : couverture ;
        position d'arrière-plan : 50 % ;
        largeur : 100 % ;
    }
    .index-module--moto--3sEm1 {
        position : absolue ;
        gauche : 0 ;
        haut : -400px /*Point fixe de la position d'initialisation du modèle de voiture*/
        image d'arrière-plan : url(https://resource.nreal.cn/web/images/home/motuo.png);/*photo de la voiture*/
        transition : 0,5 s ;
        -webkit-transform : traduire(0);
        transformer : traduire(0);
    }
    .index-module--moto--3sEm1.is-active{ /*Effet de gigue du modèle de voiture*/
        animation : saut .1s facilité d'entrée-sortie 5 alternatifs ;
    }
    @keyframes jump {/*Effet de gigue du modèle de voiture*/
        à partir de { haut : -30px ;
        à { haut : 6px }
    }
    .index-module--moto--3sEm1, .index-module--nftBox--3H_AP {
        hauteur : 200vh ;
        répétition d'arrière-plan : pas de répétition ;
        taille de l'arrière-plan : couverture ;
        position d'arrière-plan : 50 % ;
        largeur : 100 % ;
    }
    .index-module--titre--rSrVs {
        opacité : 1 ;
        largeur : 80 % ;
        marge : 0 automatique ;
    }
    .index-module--titleBox--1VS2L {
        hauteur : 50vh ;
        affichage : flexible ;
        justifier-contenu : centre ;
        align-items : centre ;
        position : absolue ;
        haut : 0 ;
        gauche : 50 % ;
        -webkit-transform : traduire (-50 %);
        transformer : traduire (-50 %);
    }
    .hoZaHW {
        nom de l'animation : ewofWB ;
        durée de l'animation : 300 ms ;
        nombre d'itérations d'animation : infini ;
        transformation-origine : centre centre ;
        état de lecture d'animation : en cours d'exécution ;
    }
    /* @keyframes ewofWB {
        0% { gauche :0px ; haut :0px;}
    25 % { gauche : 200 px ; haut : 0px ;}
    50 % { gauche : 200 px ; haut : 200 px ;}
    75 % { gauche :0px ; haut :200px ;}
    100 % { gauche : 0px ; haut : 0px ;}
    } */
    .index-module--nftTitle--20OyY {
        largeur : 100 % ;
        largeur maximale : 800 px ;
    }
    .index-module--duang--5jpDr {
        -webkit-animation : index-module--circleP--3P-V7 1.3s ;
        animation : module-index--circleP--3P-V7 1.3s ;
        -webkit-transform : traduireY(400px);
        transformer: traduireY(400px);
    }
    .index-module--moto--3sEm1 {
        position : absolue ;
        gauche : 0 ;
        -webkit-transform : traduire(0);
        transformer : traduire(0);
    }  
    </style>

 <div id="layout-container" 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--rSrVs index-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= fonction(){
            //La variable t est la distance depuis le haut lorsque la barre de défilement défile var t = document.documentElement.scrollTop||document.body.scrollTop;
            var scrollup = document.getElementById('scrollup');
            //Lors du défilement jusqu'à 200 px à partir du haut if(t>=200){ scrollup.style.backgroundImage="url(https://resource.nreal.cn/web/images/home/motuo.png)" ;
                scrollup.style.top=6+"px";  
                si(scrollup.style.top == '6px'){
                   document.getElementById("scrollup").classList.add("is-active")
                }
            }else{//Retour à la normale scrollup.style.backgroundImage="url(https://resource.nreal.cn/web/images/home/motuo.png)";
                scrollup.style.top=-400+"px";
                document.getElementById("scrollup").classList.remove("is-active")
            }
    }
</script>