视差滚动 - 掘金

视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。

视差滚动常用的几种实现方式：
1、以页面滚动条为进度条，通过背景层/内容层/悬浮层不同速度移动，形成视差的效果；
2、以「滚轮刻度」作为「动画帧度」；
3、监听mousewheel事件，滚轮每滚一次则每翻一页。

CSS实现

css有两种实现方式，通过background-attachment: fixed或transform: translate3d来实现

1、background-attachment: fixed实现视差

background-attachment决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。
有三个值：
fixed：表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
scroll：背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。
local：背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

scroll 与 fixed，一个是相对元素本身固定，一个是相对视口固定，有点类似 position 定位的 absolute 和 fixed。

原理：
当background-attachment: fixed时，即使背景有滚动机制也不会随着背景滚动

代码：

<ul>
    <li class="p-img"></li>
    <li class="p-word">one</li>
    <li class="p-img"></li>
    <li class="p-word">two</li>
    <li class="p-img"></li>
    <li class="p-word">three</li>
    <li class="p-img"></li>
    <li class="p-word">four</li>
</ul>

.p-img{
    width:100%;
    height:500px;
    background-size: cover;
    background-attachment: fixed;
}

效果屏幕录制2021-12-08 16.03.48.gif

如果改为background-attachment:scroll是这样的

屏幕录制2021-12-08 16.10.52.gif

2、transform-style:preserve-3d实现视差

transform-style:flat（默认）子元素将不保留其3D位置。
transform-style:preserve-3d子元素将保留其3D位置。父元素设置后，子元素可以相对父元素所在的平面进行3D变形操作。 perspective:number|none三维透视距离，仅作用于元素的后代，而不是其元素本身。

原理

容器设置transform-style:preserve-3d和preserve:[x]px，此时容器的子元素位于3D空间中；(preserve:[x]px要加在滚动的容器上面)
再给子元素设置不同的transform:translateZ()，此时，不同元素在3D Z轴方向距离屏幕也就不一样；
滚动滚动条，由于子元素设置了不同的transform:translateZ()，那么他们滚动的上下距离translateY相对于屏幕不同达到视差效果。

translateZ设置的越大，离视野越近，看起来越大，滑动越快(设置正值不显示)

代码

<div id="app">
   <div class="one">one</div>
   <div class="two">two</div>
   <div class="three">three</div>
</div>

body {
   perspective: 1px;
   -webkit-perspective: 1px;
   height: 100%;
   overflow-y: scroll;
   overflow-x: hidden;
 }
 #app{
   width: 100vw;
   height:200vh;
   transform-style: preserve-3d;
   perspective-origin: 100% 50%;

 }
.one{
  width:500px;
  height:500px;
  background:#409eff;
  transform: translateZ(-2px);
  -webkit-transform:translateZ(-2px);
}
.two{
  width:500px;
  height:500px;
  background:#67c23a;
  transform: translateZ(-1px);
  -webkit-transform:translateZ(-1px);
}
.three{
  width:500px;
  height:500px;
  background:#e6a23c;
  transform: translateZ(0px);
  -webkit-transform:translateZ(0px);
}