html视差滚动,视觉差滚动效果
一、是什么
视差滚动是指多层背景以不同的速度移动，形成三维的运动效果，带来非常好的视觉体验。
我们可以把网页分为：背景层、内容层和悬浮层。
滚动鼠标滚轮时，每层移动速度不同，视觉效果不佳。
二、实现方式
利用css实现视觉效果不佳的滚动效果的方法有：
background-attachment transform:translate 3d
background-attachment
用于设置背景图像是固定的还是与页面的其余部分一起滚动。
这些值如下所示：
Scroll:默认值，背景图像将随着页面的滚动而移动。修正：当页面的其余部分滚动时，背景图像不会移动。inherit:继承父元素的background-attachment属性值。要完成滚动视觉差异，需要将background-attachment属性设置为fixed，以便背景相对于视口是固定的。即使元素有滚动机制，背景也不会随着元素的内容一起滚动。
也就是说，背景从一开始就被固定在初始位置。
核心的css代码如下：
截面{高度：100vh}.g-img {背景图像：url(.);背景-附件：固定；背景-尺寸：封面；背景-位置：中心；}整体示例如下：
style div { height:100 VH；背景：rgba(0，0，0， 7)；颜色：# fff行高：100vh文本对齐：居中；字体大小：20vh}.a-img 1 { background-image:URL(https://images . pexels . com/photos/1097491/pexels-photo-1097491 . JPEG)；背景-附件：固定；背景-尺寸：封面；背景-位置：中心；}.a-img 2 { background-image:URL(https://images . pexels . com/photos/2437299/pexels-photo-2437299 . JPEG)；背景-附件：固定；背景-尺寸：封面；背景-位置：中心；}.a-img 3 { background-image:URL(https://images . pexels . com/photos/1005417/pexels-photo-1005417 . JPEG)；背景-附件：固定；背景-尺寸：封面；背景-位置：中心；}/stylediv class= a-text 1/div div class= a-img 1 2/div div class= a-text 3/div div class= a-img 2 4/div div class= a-text 5/div div class= a-img 3 6/div class= a-text 7/div
transform:translate3D
同样，我们先来看两个概念变换和透视：
Transform: css3属性，可以变换元素(2d/3d)，包括平移平移、旋转旋转、缩放比例等。透视：css3属性，当一个元素涉及3d变换时，透视可以定义我们眼睛看到的3d立体效果，也就是空间感。三维透视图如下所示：
例如：
style html { overflow:hidden；高度：100% }身体{/*视差元素的父体需要3D透视*/透视：1px变换样式：保留-3d；身高：100%；溢出-y:滚动；溢出-x:隐藏；} # app { width:100 VW；身高：200vh背景：天蓝色；填充顶部：100px}.一个{宽度：500px高度：200px背景：# 409efftransform:translate z(0px)；边距-底部：50px}.两个{宽度：500px高度：200px背景：# 67c23atransform:translate z(-1px)；边距-底部：150px}.三{宽度：500px高度：200px背景：# e6a23ctransform:translate z(-2px)；边距-底部：150px}/styledivid= app div class= one one/div div class= two two/div div class= three three/div/div。而这种方式实现视觉微分的原理如下：
在容器上设置transform-style: preserve-3D和perspective: xpx，那么这个容器中的子元素将位于3D空间中，子元素将被设置为不同的transform: translateZ()。此时，不同的元素在3D Z轴方向上与屏幕(我们的眼睛)的距离不同。由于子元素设置了不同的transform: translateYZ()，它们滚动的上下距离与屏幕(我们的眼睛)不同，达到了滚动视差的效果。以上是CSS视差滚动效果的详细内容。关于CSS视差滚动效果的更多信息，请关注其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。