CSS를 사용하여 시차 스크롤 및 지터 효과를 얻는 방법

 <스타일>
    .index-module--nftBox--3H_AP {
        높이: 200vh;
        background-repeat: 반복하지 않음;
        배경 크기: 표지;
        배경 위치: 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{ /*자동차 모델의 지터 효과*/
        애니메이션: 점프 .1s 이지인아웃 5 대체;
    }
    @keyframes 점프 {/*자동차 모델의 지터 효과*/
        { 상단: -30px }
        { 상단: 6px }로
    }
    .index-module--moto--3sEm1, .index-module--nftBox--3H_AP {
        높이: 200vh;
        background-repeat: 반복하지 않음;
        배경 크기: 표지;
        배경 위치: 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; 위쪽:0px;}
    25% { 왼쪽:200px; 위쪽:0px;}
    50% { 왼쪽:200px; 위쪽:200px;}
    75% { 왼쪽:0px; 위쪽:200px;}
    100% { 왼쪽:0px; 위쪽:0px;}
    } */
    .index-module--nftTitle--20OyY {
        너비: 100%;
        최대 너비: 800px;
    }
    .index-module--duang--5jpDr {
        -웹킷-애니메이션: 인덱스 모듈--circleP--3P-V7 1.3s;
        애니메이션: 인덱스 모듈--circleP--3P-V7 1.3s;
        -webkit-transform: 번역Y(400px);
        변환: 번역Y(400px);
    }
    .index-module--moto--3sEm1 {
        위치: 절대;
        왼쪽: 0;
        -webkit-transform: 번역(0);
        변환: 번역(0);
    }  
    </style>

 <div id="layout-container" 클래스="콘텐츠">
        <div class="index-module--nftBox--3H_AP" 스타일="배경-이미지: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>

 <스크립트 유형="텍스트/자바스크립트">
    window.onscroll=함수(){
            //변수 t는 스크롤 막대가 스크롤될 때 상단으로부터의 거리입니다. var t = document.documentElement.scrollTop||document.body.scrollTop;
            var scrollup = document.getElementById('scrollup');
            //위에서 200px까지 스크롤할 때 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("is-active")
                }
            }else{//정상으로 돌아가기 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>