关于前端:Amazing巧用-CSS-视差实现酷炫交互动效

本文将介绍利用 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

很显著，当滚动滚动条时，不同子元素的位移水平从视觉上看是不一样的，也就达到了所谓的滚动视差成果。

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

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 再把这个动画和滚动操作联合起来呢？

在前不久，我介绍过 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 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

关于前端:Amazing巧用-CSS-视差实现酷炫交互动效

应用 `transform: translate3d` 实现滚动视差

借助 CSS 视差实现酷炫交互动效

CSS 滚动视差动画 2

联合 CSS @scroll-timeline，利用 CSS 管制滚动与动画

总结一下

Just My Socks（注册教程内含优惠码）

关于前端:Amazing巧用-CSS-视差实现酷炫交互动效

应用 transform: translate3d 实现滚动视差

借助 CSS 视差实现酷炫交互动效

CSS 滚动视差动画 2

联合 CSS @scroll-timeline，利用 CSS 管制滚动与动画

总结一下

Just My Socks（注册教程 内含优惠码）

应用 `transform: translate3d` 实现滚动视差

Just My Socks（注册教程内含优惠码）