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

举报
猫先生c 发表于 2023/09/28 09:12:51 2023/09/28
【摘要】 视差滚动视差滚动是一种效果,能够使不同层次的元素以不同的速度进行滚动,从而产生了视觉上的深度感和动态效果。可以通过两种方式来实现:background-attachment和transform:translate3D 1、background-attachmentbackground-attachment:决定背景图像的位置是在视口内固定,或者随着包含它的区块滚动。它的属性值的含义如下:属...

视差滚动

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

1、background-attachment

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

属性值 含义
fixed 背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容
local 背景相对于元素的内容固定。如果一个元素拥有滚动机制,背景将会随着元素的内容滚动,并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
scroll 背景相对于元素本身固定,而不是随着它的内容滚动(对元素边框是有效的)。

对父元素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-styleperspective,使该容器的子元素处在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>

具体实现效果如下:
在这里插入图片描述

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。