?? 個(gè)人主頁：不叫貓先生
???♂? 作者簡(jiǎn)介：2022年度博客之星前端領(lǐng)域TOP 2，前端領(lǐng)域優(yōu)質(zhì)作者、阿里云專家博主，專注于前端各領(lǐng)域技術(shù)，共同學(xué)習(xí)共同進(jìn)步，一起加油呀！
??優(yōu)質(zhì)專欄：vue3從入門到精通、TypeScript從入門到實(shí)踐
?? 資料領(lǐng)取：前端進(jìn)階資料可以找我免費(fèi)領(lǐng)取
?? 摸魚學(xué)習(xí)交流：我們的宗旨是在工作中摸魚，摸魚中進(jìn)步，期待大佬一起來摸魚(文末有我wx或者私信)。

視差滾動(dòng)

視差滾動(dòng)是一種效果，能夠使不同層次的元素以不同的速度進(jìn)行滾動(dòng)，從而產(chǎn)生了視覺上的深度感和動(dòng)態(tài)效果?？梢酝ㄟ^兩種方式來實(shí)現(xiàn)：background-attachment和transform:translate3D

1、background-attachment

background-attachment：決定背景圖像的位置是在視口內(nèi)固定，或者隨著包含它的區(qū)塊滾動(dòng)。
它的屬性值的含義如下：

對(duì)父元素css_demo設(shè)置overflow: scroll，當(dāng)元素內(nèi)容超出頁面時(shí)滾動(dòng)。子元素word隨著頁面滾動(dòng)顯示，對(duì)子元素bg設(shè)置 background-attachment: fixed，使其在當(dāng)前視口固定。

<template>
    <div class="css_demo">
        <div class="word">視差滾動(dòng)</div>
        <div class="bg bg1"></div>
        <div class="word">二</div>
        <div class="bg bg2"></div>
        <div class="word">三</div>
        <div class="bg bg3"></div>
        <div class="word">四</div>
        <div class="bg bg4"></div>
        <div class="word">五</div>
        <div class="bg bg5"></div>
        <div class="word">六</div>
        <div class="bg bg6"></div>
        <div class="word">七</div>
        <div class="bg bg7"></div>
        <div class="word">八</div>
        <div class="bg bg8"></div>
        <div class="word">九</div>
        <div class="bg bg9"></div>
    </div>
</template>
<style lang='scss' scoped>
.css_demo {
    width: 100%;
    height: 100%;
    overflow: scroll;
    .bg {
        background-position: center center;
        background-size: cover;
        background-attachment: fixed;
        &.bg1 {
            background-image: url("/src/assets/img/1.jpeg");
        }
        &.bg2 {
            background-image: url("/src/assets/img/2.webp");
        }
        &.bg3 {
            background-image: url("/src/assets/img/3.webp");
        }
        &.bg4 {
            background-image: url("/src/assets/img/4.webp");
        }
        &.bg5 {
            background-image: url("/src/assets/img/5.webp");
        }
        &.bg6 {
            background-image: url("/src/assets/img/6.webp");
        }
        &.bg7 {
            background-image: url("/src/assets/img/7.webp");
        }
        &.bg8 {
            background-image: url("/src/assets/img/8.webp");
        }
        &.bg9 {
            background-image: url("/src/assets/img/9.webp");
        }
    }
}
div {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.1);
    color: #fff;
    line-height: 100vh;
    text-align: center;
    font-size: 20vh;
}
</style>

實(shí)現(xiàn)效果如下：

2、transform:translate3D

涉及到的CSS屬性如下：

• transform
  可以對(duì)元素進(jìn)行變換(2d/3d)，包括平移 translate、旋轉(zhuǎn) rotate、縮放 scale等
• perspective
  指定了觀察者與 z=0 平面的距離，使具有三維位置變換的元素產(chǎn)生透視效果。z>0 的三維元素比正常大，而 z<0 時(shí)則比正常小，大小程度由該屬性的值決定。元素涉及 3d 變換時(shí)，perspective 可以讓我們眼睛看到 3d 立體效果，有空間感。
• transform-style
  設(shè)置元素的子元素是位于 3D 空間中還是平面中。

通過設(shè)置transform-style和 perspective，使該容器的子元素處在3D空間中，然后設(shè)置 transform: translateZ使物體在滾動(dòng)的時(shí)候在Y軸移動(dòng)位移不同，產(chǎn)生視覺差。

<template>
    <div class="transform_container">
        <div class="container">
            <div class="one">一一一一</div>
            <div class="two">二二二二</div>
            <div class="three">三三三三三</div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.transform_container {
    perspective: 1px;
    transform-style: preserve-3d;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}
.container {
    transform-style: preserve-3d;
    height: 150%;
    .one {
        font-weight: 600;
        transform: translateZ(-1px);
        position: absolute;
        top: 20%;
        left: 20%;
    }
    .two {
        font-weight: 600;
        transform: translateZ(-2px);
        position: absolute;
        top: 20%;
        left: 35%;
    }
    .three {
        font-weight: 600;
        transform: translateZ(-3px);
        position: absolute;
        top: 20%;
        left: 50%;
    }
}
</style>

具體實(shí)現(xiàn)效果如下：

??好書推薦

《深入理解設(shè)計(jì)模式》鏈接直達(dá)
本書系統(tǒng)介紹了23種設(shè)計(jì)模式，根據(jù)具體的實(shí)例形象化、具體化地進(jìn)行了代碼的編寫和詳細(xì)講解，讓那些本來對(duì)設(shè)計(jì)模式不太了解、一知半解、只有概念的讀者，徹底了解和掌握常用的設(shè)計(jì)模式使用場(chǎng)景及使用方式，并掌握每個(gè)設(shè)計(jì)模式的UML結(jié)構(gòu)和描繪方式。本書共23章，包括認(rèn)識(shí)設(shè)計(jì)模式、單例模式、工廠模式、建造者模式、原型模式、適配器模式、裝飾器模式、外觀模式、橋接模式、組合模式、享元模式、代理模式、策略模式、命令模式、狀態(tài)模式、模板方法模式、備忘錄模式、中介者模式、觀察者模式、迭代器模式、責(zé)任鏈模式、訪問者模式、解釋器模式。通過以上的知識(shí)，讓你從模式小白直接升級(jí)為模式大神！本書所需源代碼，均可通過本書配套下載鏈接獲得。
文章來源地址http://www.zghlxwxcb.cn/news/detail-454921.html

到了這里，關(guān)于【CSS】面試官問我視差滾動(dòng)怎么實(shí)現(xiàn)？我懵了...的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！