วิธีใช้ CSS เพื่อให้เกิดการเลื่อนแบบพารัลแลกซ์และเอฟเฟกต์กระวนกระวายใจ

 <สไตล์>
    .index-module--nftBox--3H_AP {
        ความสูง: 200vh;
        พื้นหลังซ้ำ: ไม่ซ้ำ;
        ขนาดพื้นหลัง: ปก;
        ตำแหน่งพื้นหลัง: 50%;
        ความกว้าง: 100%;
    -
    .index-module--moto--3sEm1 {
        ตำแหน่ง: แน่นอน;
        ซ้าย: 0;
        ด้านบน: -400px; /*ตำแหน่งการเริ่มต้นรุ่นรถ*/
        ภาพพื้นหลัง: url (https://resource.nreal.cn/web/images/home/motuo.png);/*รูปภาพรถยนต์*/
        การเปลี่ยนแปลง: .5 วินาที;
        -webkit-transform: แปล (0);
        แปลงร่าง: แปล (0);
    -
    .index-module--moto--3sEm1.is-active{ /*เอฟเฟกต์กระวนกระวายใจของรุ่นรถยนต์*/
        แอนิเมชั่น: กระโดด .1s เข้าออก 5 สลับ;
    -
    @keyframes jump {/*เอฟเฟกต์ Jitter ของรุ่นรถ*/
        จาก { ด้านบน: -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; ด้านบน:0px;}
    25% { ซ้าย:200px; ด้านบน:0px;}
    50% { ซ้าย:200px; ด้านบน:200px;}
    75% { ซ้าย:0px; ด้านบน:200px;}
    100% { ซ้าย:0px; ด้านบน:0px;}
    -
    .index-module--nftTitle--20OyY {
        ความกว้าง: 100%;
        ความกว้างสูงสุด: 800px;
    -
    .index-module--duang--5jpDr {
        -webkit-animation: ดัชนีโมดูล - วงกลม P--3P-V7 1.3s;
        ภาพเคลื่อนไหว: โมดูลดัชนี - วงกลม P--3P-V7 1.3s;
        -webkit-แปลง: แปล Y(400px);
        แปลงร่าง: แปล Y (400px);
    -
    .index-module--moto--3sEm1 {
        ตำแหน่ง: แน่นอน;
        ซ้าย: 0;
        -webkit-transform: แปล (0);
        แปลงร่าง: แปล (0);
    -  
    </สไตล์>

 <div id="layout-container" class="content">
        <div class="index-module--nftBox--3H_AP" style="พื้นหลัง-ภาพ: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 ดัชนีโมดูล--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=ฟังก์ชั่น(){
            //ตัวแปร t คือระยะห่างจากด้านบนเมื่อแถบเลื่อนเลื่อน var t = document.documentElement.scrollTop||document.body.scrollTop;
            var scrollup = document.getElementById('scrollup');
            //เมื่อเลื่อนไปที่ 200px จากด้านบน if(t>=200){ scrollup.style.พื้นหลังImage="url(https://resource.nreal.cn/web/images/home/motuo.png)";
                scrollup.style.top=6+"px";  
                ถ้า(scrollup.style.top == '6px'){
                   document.getElementById("scrollup").classList.add("is-active")
                -
            }else{//กลับสู่ scrollup.style.พื้นหลังImage="url(https://resource.nreal.cn/web/images/home/motuo.png) ปกติ";
                scrollup.style.top=-400+"px";
                document.getElementById("scrollup").classList.remove("is-active")
            -
    -
</สคริปต์>