【CSS】面试官问我视差滚动怎么实现？我懵了...

🐱 个人主页：不叫猫先生
🙋‍♂️ 作者简介：2022年度博客之星前端领域TOP 2，前端领域优质作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！
💫优质专栏：vue3从入门到精通、TypeScript从入门到实践
📢 资料领取：前端进阶资料可以找我免费领取
🔥 摸鱼学习交流：我们的宗旨是在工作中摸鱼，摸鱼中进步，期待大佬一起来摸鱼(文末有我wx或者私信)。

视差滚动

视差滚动是一种效果，能够使不同层次的元素以不同的速度进行滚动，从而产生了视觉上的深度感和动态效果。可以通过两种方式来实现：background-attachment和transform:translate3D

1、background-attachment

background-attachment：决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。
它的属性值的含义如下：

对父元素css_demo设置overflow: scroll，当元素内容超出页面时滚动。子元素word随着页面滚动显示，对子元素bg设置 background-attachment: fixed，使其在当前视口固定。

<template>
    <div class="css_demo">
        <div class="word">视差滚动</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>

实现效果如下：

2、transform:translate3D

涉及到的CSS属性如下：

• transform
  可以对元素进行变换(2d/3d)，包括平移 translate、旋转 rotate、缩放 scale等
• perspective
  指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。元素涉及 3d 变换时，perspective 可以让我们眼睛看到 3d 立体效果，有空间感。
• transform-style
  设置元素的子元素是位于 3D 空间中还是平面中。

通过设置transform-style和 perspective，使该容器的子元素处在3D空间中，然后设置 transform: translateZ使物体在滚动的时候在Y轴移动位移不同，产生视觉差。

<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>

具体实现效果如下：

🌟好书推荐

《深入理解设计模式》链接直达
本书系统介绍了23种设计模式，根据具体的实例形象化、具体化地进行了代码的编写和详细讲解，让那些本来对设计模式不太了解、一知半解、只有概念的读者，彻底了解和掌握常用的设计模式使用场景及使用方式，并掌握每个设计模式的UML结构和描绘方式。本书共23章，包括认识设计模式、单例模式、工厂模式、建造者模式、原型模式、适配器模式、装饰器模式、外观模式、桥接模式、组合模式、享元模式、代理模式、策略模式、命令模式、状态模式、模板方法模式、备忘录模式、中介者模式、观察者模式、迭代器模式、责任链模式、访问者模式、解释器模式。通过以上的知识，让你从模式小白直接升级为模式大神！本书所需源代码，均可通过本书配套下载链接获得。