本文将介绍利用 CSS 实现滚动视差成果的一个小技巧，并且，利用这个技巧来制作一些有意思的交互特效。
对于应用 CSS 实现滚动视差成果，在之前有一篇文章详细描述过具体计划 - CSS 实现视差成果，感兴趣的同学能够先看看这篇文章。
这里，会使用上这样一种纯 CSS 的视差技巧：
应用 transform: translate3d 实现滚动视差
这里利用的是 CSS 3D，实现滚动视差成果。
原理就是：
- 咱们给容器设置上
transform-style: preserve-3d和perspective: xpx，那么处于这个容器的子元素就将位于3D空间中， - 再给子元素设置不同的
transform: translateZ()，这个时候，不同元素在 3D Z轴方向间隔屏幕（咱们的眼睛）的间隔也就不一样 - 滚动滚动条，因为子元素设置了不同的
transform: translateZ()，那么他们滚动的高低间隔translateY绝对屏幕（咱们的眼睛），也是不一样的，这就达到了滚动视差的成果。
对于transform-style: preserve-3d以及perspective本文不做过多篇幅开展，默认读者都有所理解，还不是特地分明的，能够先理解下 CSS 3D。
外围代码示意就是：
<div class="g-container"> <div class="section-one">translateZ(-1)</div> <div class="section-two">translateZ(-2)</div> <div class="section-three">translateZ(-3)</div></div>html { height: 100%; overflow: hidden;}body { perspective: 1px; transform-style: preserve-3d; height: 100%; overflow-y: scroll; overflow-x: hidden;}.g-container { height: 150%; .section-one { transform: translateZ(-1px); } .section-two { transform: translateZ(-2px); } .section-three { transform: translateZ(-3px); }}总结就是父元素设置 transform-style: preserve-3d 和 perspective: 1px，子元素设置不同的 transform: translateZ，滚动滚动条，成果如下：
CodePen Demo -- CSS 3D parallax
很显著，当滚动滚动条时，不同子元素的位移水平从视觉上看是不一样的，也就达到了所谓的滚动视差成果。
借助 CSS 视差实现酷炫交互动效
OK，有了下面的铺垫，咱们来看看这样两个乏味的交互成果。由群里的日服第所有图仔 wheatup 情谊提供。
先来看第一个成果：
成果是一种文本交替在不同高度的层展现，并且在滚动的过程中，会有显著的 3D 视差成果。
这个成果并不艰难，外围就在于：
- 利用了
transform-style: preserve-3d和perspective构建不同的档次成果，制作视差成果 - 利用元素的
::before，::after构建了 3D 的成果
咱们看一个最小化 DEMO：
<div class="g-container"> <div class="g-box"></div> <div class="g-box"></div> <div class="g-box"></div></div>.g-container { height: 150vh; perspective: 600px;}.g-box { width: 200px; height: 200px; background: #999; transform-style: preserve-3d; &::before, &::after { content: ""; position: absolute; right: 0; left: 0; transform-style: preserve-3d; height: 200px; background-color: #ccc; } &::before { transform-origin: top center; top: 0; transform: rotateX(-90deg); } &::after { transform-origin: bottom center; bottom: 0; transform: rotateX(90deg); }}滚动 g-container 容器，即可失去一种 3D 成果：
因为还须要视差成果，咱们须要给不同的层赋予不同的 translateZ()，咱们略微革新下代码，给每个 g-box 两头，再加多一层失常的 div，再给每个 g-box 加上一个 translateZ()。
<div class="g-container"> <div class="g-box"></div> <div class="g-normal"></div> <div class="g-box"></div> <div class="g-normal"></div> <div class="g-box"></div></div>.g-container { width: 400px; height: 150vh; perspective: 800px;}.g-normal { width: 200px; height: 200px; background: #666; transform-style: preserve-3d;}.g-box { width: 200px; height: 200px; background: #999; transform-style: preserve-3d; transform: translate3d(0, 0, 200px); &::before, &::after { // ... 放弃不变 }}- 因为
g-box和g-normal的 translateZ 值不同，所以滚动的过程中会呈现视差成果 - 因为
g-box的translateZ值为translateZ(200px)，两个伪元素的rotateX为正负90deg，且高度为200px，因而g-box和g-normal刚好能够通过g-box的两个伪元素衔接起来
最终，成果就是如上所示：
DEMO 的残缺代码：CodePen Demo - 3D Parallax Scroll
CSS 滚动视差动画 2
OK，上面第二个滚动视差动画，也十分的有意思，想看看原版，也是来自于 wheatup 的 CodePen：
CodePen Demo -- 3D Chat Viewer
这里外围还是借助了 CSS 3D 的能力，然而因为应用的是滚动触发动画成果，并且有肯定的从含糊到清晰的渐现成果，因而还是有肯定的 JavaScript 代码。
感兴趣的能够看看上述的源码。
本文将尝试应用 CSS @Property 和 CSS 最新的个性 @scroll-timeline 还原该成果借助 JavaScript 实现的局部。
当然，首先不论是否须要借助 JavaScript，外围的 3D 局部应用的都是 CSS。
咱们首先须要这样一个构造：
<div class="g-wrapper"> <div class="g-inner"> <div class="g-item"></div> <div class="g-item"></div> // ... 反复 N 个 </div></div>.g-wrapper { width: 100vw; height: 100vh;}.g-inner { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;}.g-item { width: 300px; height: 100px; background: #000;}大略是这个成果：
而后，咱们增加一些 CSS 3D 变换：
.g-wrapper { // ... 与上述代码保持一致 perspective: 200px; transform-style: preserve-3d;}.g-inner { // ... 与上述代码保持一致 transform-style: preserve-3d; transform: translateY(calc(-50% + 100px)) translateZ(0) rotateX(90deg); transform-origin: bottom center;}就能失去这样一种视角的成果：
因为容器 g-inner 进行了一个绕 X 轴的 90deg 翻转，也就是 rotateX(90deg)，所以，咱们再给 g-item 一个反向的旋转，把卡片翻转回来：
.g-wrapper { // ... 与上述代码保持一致 perspective: 200px; transform-style: preserve-3d;}.g-inner { // ... 与上述代码保持一致 transform-style: preserve-3d; transform: translateY(calc(-50% + 100px)) translateZ(0) rotateX(90deg); transform-origin: bottom center;}.g-item { // ... 与上述代码保持一致 transform: rotateX(-90deg);}就能失去这样一种视角的成果：
此时，咱们给容器一个赋予一个 translateZ 的动画：
.g-inner { animation: move 10s infinite linear;}@keyframes move { 100% { transform: translateY(calc(-50% + 100px)) translateZ(calc(100vh + 120px)) rotateX(90deg); }}这样，整个动画的雏形就实现了，通过管制父元素的 perspective 大小和容器的 translateZ，失去了一种一直向视角背后位移的动画成果：
CodePen Demo -- CSS 3D Effect Demo
联合 CSS @scroll-timeline，利用 CSS 管制滚动与动画
那怎么利用 CSS 再把这个动画和滚动操作联合起来呢？
在前不久，我介绍过 CSS 的一个重磅个性 来了来了，它终于来了，动画杀手锏 @scroll-timeline，利用它能够实现 CSS 动画与滚动操作的联合，咱们利用它革新一下代码：
<div class="g-scroll" id="g-scroll"></div><div class="g-wrapper"> <div class="g-inner"> <div class="g-item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div> // ... 反复 N 个 </div></div>@property --phase { syntax: '<length>'; inherits: false; initial-value: 15px;}.g-scroll { width: 100%; height: 1000vh;}.g-wrapper { position: fixed; width: 100vw; height: 100vh; perspective: 200px; transform-style: preserve-3d;}.g-inner { position: relative; height: 100%; // 省略一些 flex 布局代码，与上文统一 transform-style: preserve-3d; transform: translateY(calc(-50% + 100px)) translateZ(var(--phase)) rotateX(90deg); transform-origin: bottom center; animation-name: move; animation-duration: 1s; animation-timeline: box-move;}.g-item { width: 300px; height: 200px; color: #fff; background: #000; transform: rotateX(-90deg);}@scroll-timeline box-move { source: selector("#g-scroll"); orientation: "vertical";}@keyframes move { 0% { --phase: 0; } 100% { --phase: calc(100vh + 100px); }}这里相比上述的 DEMO，次要增加了 @scroll-timeline 的代码，咱们减少了一个超长容器 .g-scroll，并且把它的滚动动作应用 @scroll-timeline box-move {} 规定和 animation-timeline: box-move 绑定了起来，这样，咱们能够应用滚动去触发 @keyframes move {} CSS 动画。
成果如下：
在原成果中，还有一些应用 JavaScript 联合滚动间隔管制的含糊的变动，这个，咱们应用 backdrop-filter: blur() 也能够简略模仿。咱们再简略增加一层 g-mask：
<div class="g-scroll" id="g-scroll"></div><div class="g-wrapper"> <div class="g-mask"></div> <div class="g-inner"> <div class="g-item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div> // ... 反复 N 个 </div></div>// 其余保持一致.g-mask { position: fixed; width: 100vw; height: 100vh; backdrop-filter: blur(5px); transform: translateZ(0);}这样，根本就还原了原成果，并且，咱们用且仅应用了 CSS：
CodePen Demo -- Pure CSS Scroll Animation 2（Chrome Only && Support ScrollTimeline）
总结一下
当然，本文后一个成果中，应用了十分多目前兼容性还十分差的 CSS 属性，尤其是 @scroll-timeline，依然处于十分晚期的阶段，兼容性一片红。然而不障碍咱们学习、感触 CSS 的美妙。
要齐全读懂本文，可能有一些前置常识须要理解，依据须要，你能够延长浏览下：
- CSS 实现视差成果
- CSS @property，让不可能变可能
- 来了来了，它终于来了，动画杀手锏 @scroll-timeline
- 深入探讨 filter 与 backdrop-filter 的异同
好了，本文到此结束，心愿对你有帮忙 :)
想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 -- iCSS前端趣闻
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，继续更新，欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。