Cómo utilizar CSS para lograr efectos de desplazamiento de paralaje y fluctuación

 <estilo>
    .index-module--nftBox--3H_AP {
        altura: 200vh;
        repetición de fondo: no repetición;
        tamaño de fondo: portada;
        posición de fondo: 50%;
        ancho: 100%;
    }
    .módulo-index--moto--3sEm1 {
        posición: absoluta;
        izquierda: 0;
        arriba: -400px; /*Punto fijo de posición de inicialización del modelo de automóvil*/
        imagen de fondo: url(https://resource.nreal.cn/web/images/home/motuo.png);/*imagen del coche*/
        transición: .5s;
        -webkit-transformación: traducir(0);
        transformar: traducir(0);
    }
    .index-module--moto--3sEm1.is-active{ /*Efecto de fluctuación del modelo de coche*/
        animación: salto .1s entrada y salida 5 alternativas;
    }
    @keyframes jump {/*Efecto de fluctuación del modelo de coche*/
        desde {arriba: -30px}
        a {arriba: 6px}
    }
    .módulo-index--moto--3sEm1, .módulo-index--nftBox--3H_AP {
        altura: 200vh;
        repetición de fondo: no repetición;
        tamaño de fondo: portada;
        posición de fondo: 50%;
        ancho: 100%;
    }
    .index-module--título--rSrVs {
        opacidad: 1;
        ancho: 80%;
        margen: 0 automático;
    }
    .index-module--titleBox--1VS2L {
        altura: 50vh;
        pantalla: flexible;
        justificar-contenido: centro;
        alinear elementos: centro;
        posición: absoluta;
        arriba: 0;
        izquierda: 50%;
        -webkit-transform: traducir(-50%);
        transformar: traducir (-50%);
    }
    .hoZaHW {
        nombre de la animación: ewofWB;
        duración de la animación: 300 ms;
        animación-iteración-recuento: infinito;
        origen-transformación: centro centro;
        estado de reproducción de animación: en ejecución;
    }
    /* @keyframes ewofWB {
        0% { izquierda:0px; arriba:0px;}
    25% { izquierda:200px; arriba:0px;}
    50% {izquierda:200px; arriba:200px;}
    75% { izquierda:0px; arriba:200px;}
    100% { izquierda:0px; arriba:0px;}
    } */
    .index-module--nftTitle--20OyY {
        ancho: 100%;
        ancho máximo: 800px;
    }
    .index-module--duang--5jpDr {
        -webkit-animación: módulo-índice--circleP--3P-V7 1.3s;
        animación: módulo de índice--circleP--3P-V7 1.3s;
        -webkit-transform: traducirY(400px);
        transformar: traducirY(400px);
    }
    .módulo-index--moto--3sEm1 {
        posición: absoluta;
        izquierda: 0;
        -webkit-transformación: traducir(0);
        transformar: traducir(0);
    }  
    </estilo>

 <div id="contenedor-diseño" clase="contenido">
        <div class="index-module--nftBox--3H_AP" style="fondo-imagen: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="módulo-índice--título--rSrVs módulo-índice--títuloBox--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>

 <tipo de script="texto/javascript">
    ventana.onscroll= función(){
            //La variable t es la distancia desde la parte superior cuando la barra de desplazamiento se desplaza var t = document.documentElement.scrollTop||document.body.scrollTop;
            var desplazamiento hasta document.getElementById('desplazamiento');
            //Al desplazarse a 200 px desde la parte superior 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("está-activo")
                }
            }else{//Volver al desplazamiento normalup.style.backgroundImage="url(https://resource.nreal.cn/web/images/home/motuo.png)";
                scrollup.style.top=-400+"px";
                document.getElementById("scrollup").classList.remove("está-activo")
            }
    }
</script>