css视差滚动原理(视差滚动网页设计)

TheForceProject[CSS]面试官问我如何实现视差滚动？我一头雾水……个人主页：不叫猫老师

作者简介：博客之星2022年前端领域TOP2，前端领域优质作者，阿里云专家博主。专注于各个领域的前端技术，一起学习，一起进步，一起努力吧！

优质专栏：vue3从入门到熟练、TypeScript从入门到实践

资料收集：你可以免费向我获取高级前端资料

钓鱼、学习、交流：我们的宗旨是在工作中钓鱼，在钓鱼中进步。期待大佬们一起来钓鱼。

视差滚动

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

1、background-attachment

background-attachment：确定背景图像的位置是固定在视口内，还是随包含它的块一起滚动。

其属性值含义如下：

属性值含义固定背景相对于视口是固定的。即使元素具有滚动机制，背景也不会跟随元素的内容。本地背景相对于元素的内容是固定的。如果元素具有滚动机制，则背景将随着元素的内容而滚动，并且背景的绘图区域和定位区域将相对于可滚动区域而不是包含它们的边框。滚动背景相对于元素本身是固定的，而不是随其内容滚动。设置overflow:scroll到父元素css_demo，当元素内容超出页面时滚动。子元素word随着页面滚动而显示，子元素bg设置为background-attachment:fixed，使其固定在当前视口中。

模板divclass='css_demo'divclass='word'视差滚动/divdivclass='bgbg1'/divdivclass='word'two/divdivclass='bgbg2'/divdivclass='word'三/divdivclass='bgbg3'/divdivclass='word'四/divdivclass='bgbg4'/divdivclass='word'Five/divdivclass='bgbg5'/divdivclass='word'6/divdivclass='bgbg6'/divdivclass='word'7/divdivclass='bgbg7'/divdivclass='word'8/divdivclass='bgbg8'/divdivclass='word'9/divdivclass='bgbg9'/div/div/templatestylelang='scss'scoped.css_demo{width:100%;高度：100%;溢出：滚动；bg{背景位置：中心中心；背景尺寸：封面；背景附件：已修复；bg1{背景-image:url('/src/assets/img/1.jpeg');}.bg2{背景-image:url('/src/assets/img/2.webp');}.bg3{背景-image:url('/src/assets/img/3.webp');}.bg4{background-image:url('/src/assets/img/4.webp');}.bg5{背景-image:url('/src/assets/img/5.webp');}.bg6{背景-image:url('/src/assets/img/6.webp');}.bg7{背景-image:url('/src/assets/img/7.webp');}.bg8{背景-image:url('/src/assets/img/8.webp');}.bg9{背景-image:url('/src/assets/img/9.webp');}}}div{height:100%;宽度：100%；背景：rgba(0,0,0,0.1);color:#fff；行高：100vh；文本对齐：居中；字体大小：20vh;}/样式

效果如下：

2、transform:translate3D

涉及的CSS属性如下：

转换

元素可以进行变换，包括平移、旋转、旋转、缩放等。

指定观察者与z=0平面之间的距离，为具有三维位置变换的元素提供透视效果。三维元素在z0处大于正常值，在z0处小于正常值，具体取决于此属性的值。当元素涉及3D变换时，透视可以让我们的眼睛看到3D效果和空间感。变换风格

设置元素的子元素是在3D空间还是平面中。通过设置transform-style和perspective，使容器的子元素处于3D空间，然后设置transform:translateZ使得对象在滚动时在Y轴上产生不同的位移，从而产生视觉上的差异。

模板divclass='transform_container'divclass='容器'divclass='一'一一一一/divdivclass='二'二二二二/divdivclass='三'三三三三三/div/div/div/templatestyle范围lang='scss'.transform_container{perspective:1px;变换样式：pserve-3d；高度：100%;溢出-y:滚动；溢出-x:隐藏；}.container{transform-style:pserve-3d;身高：150%；one{font-weight:600;Transform:平移(-1px);绝对位置：TOP:20%；left:20%;}.two{fon{fon{fonfonT-WeiGHT:600;Transform:翻译(-2px);绝对位置3:TOP:20%；剩余：35%；}.三{字体粗细：600;Transform:平移Z(-3px);绝对位置：顶部：20%；剩余：50%；}}/风格

具体实施效果如下：

好书推荐

《深入理解设计模式》直接链接

本书系统地介绍了23种设计模式，并直观、具体地写出代码并结合具体例子进行详细讲解，让原本对设计模式不太了解、只有一知半解、只有概念的读者能够彻底理解并掌握它们。设计模式的常见使用场景和使用方法，掌握各个设计模式的UML结构和描述方法。本书总共23章，包括理解设计模式、单例模式、工厂模式、构建器模式、原型模式、适配器模式、装饰器模式、外观模式、桥接模式、组合模式、享元模式、代理模式、策略模式。命令模式、状态模式、模板方法模式、备忘录模式、中介者模式、观察者模式、迭代器模式、责任链模式、访问者模式、解释器模式。通过以上知识，你可以从花样新手直接升级为花样高手！本书所需的源代码可以通过本书提供的下载链接获得。