屏幕录制2023-09-01 下午2.35.41.gif

🌻 前言

其实写本文的初衷只是想分享一个css新特性【scroll-timeline】😂,但是我想要体现出它的强大效果，此时正好想到了之前看到过钉钉的首页动画，就是滚动页面然后进行一系列动画的，所以我决定实现一下这个效果。（见上方动图，只是实现了大体效果，细节没有优化，各位看官多多担待🙈）

它是干什么用的呢？
一句话概括为：“用滚动区域的滚动动作驱动动画的进度”。

可能有些同学还不太懂，我再稍加解释。我们以往的animation都是以时间作为动画的时间线的，比如我们需要设置动画的总时长animation-duration为 n 秒，那么动画在进行 n 秒后，就会处于 100% 的状态。

而当我们使用了scroll-timeline之后，以滚动动作驱动动画的进度，那么就是我们在滚动区域滚到底时，动画就会处于100%状态，即滚动了百分之多少，动画就会进行百分之多少。还不明白可以体验下方的小demo👇👇👇

以前如果要实现这种效果，往往得监听 scroll 事件，用js动画实现，总体来说非常复杂，但是有了这个新特性之后，为css的创造性又提升了一个台阶。

🛠 API 使用方法

1️⃣ 首先我们需要在滚动区域上定义一个滚动时间线，滚动时间线需要设置两个值：

scroll-timeline-name: 命名的滚动进度时间线的名称；
scroll-timeline-axis: 以哪个方向的滚动条驱动动画，即滚动方向；

可选的滚动方向有：

block: 滚动条元素块轴上的滚动条，该轴垂直于一行中的文本流的方向。对于水平书写模式，如标准英语，这与y相同，而对于垂直书写模式，它与x相同。这是默认值。
inline: 滚动条元素的内联轴上的滚动条，该轴与一行中的文本流平行。对于水平写入模式，这与x相同，而对于垂直写入模式，它与y相同。
x(Firefox语法为 vertical): 滚动区域垂直轴上的滚动条；
y(Firefox语法为 horizontal): 滚动区域水平轴上的滚动条。

2️⃣ 然后在滚动区域内需要执行动画的元素上，将动画时间线设置为我们定义的滚动时间线的名称。设置完成后，该元素的动画进度就会变成通过滚动动作驱动。

🍺 实现钉钉首页特效

1. 总体分析

经过我十几分钟的分析，将这个复杂的特效切割成了三部分：

logo部分向上，向屏幕外移动，滚动一段时间后不透明度逐渐降低，最终从上方消失；
色块有3d的深度效果，滚动时逐渐向屏幕外扩散，并最终都移动到屏幕外；
菜单面板在logo快消失时，从屏幕中心一个点逐渐扩散开来，并在快扩散成型时出现灰色背景；

分析结束后，开始动工✊。

2. 整体布局

首先创建一个宽高满屏的div，为了方便后面描述，我们叫这个div为【滚动盒子】，并设置黑色背景。
然后添加一个子元素，设置高度大于100%，这样父元素就能滚动了，不然无法驱动动画执行，这里我随便设置了高度200%。

那么有动效的元素（我暂且叫它【动效盒子】）在滚动盒子中如何定位呢，总不能就在文档流中吧，那岂不是滚动区域滚动的时候，整个动效盒子也会被来回滚动，甚至滚出可视区域。这样显然是不行的，并且设置 absolute 绝对定位也是不行的，同样会跟随滚动。

得出结论： 为了让动效盒子不在滚动盒子内滚动，只能考虑 fixed 固定定位和 sticky 粘性定位，两者都可以实现，但是 fixed 定位不太灵活，一旦修改滚动盒子的位置，就得跟着调整动效盒子的位置。所以最终我给动效盒子设置宽高100%，并粘性定位于滚动盒子顶部。

布局结构大致如下：

:root {
  --mainHeight: 100vh;
}

#container {
  position: relative;
  height: var(--mainHeight);
  overflow-x: hidden;
  overflow-y: scroll;
  background: #040506;
}

#stretcher {
  height: calc(2 * var(--mainHeight));
}

main {
  pointer-events: none;
  position: sticky;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--mainHeight);
  overflow: hidden;
}


//滚动盒子
 <div id="container">
    //动效盒子
    <main>
       //这里面是实现动效的元素
    </main>
    
    //撑开父元素高度，让父元素可以滚动
    <div id="stretcher"></div>
 </div>

3. logo动效

因为动效是 3D动效，所以我们先在动效盒子设置下3D效果和视距：

main{
    transform-style: preserve-3d;
    perspective: 500px;
}

然后就是设置lodo的动画了，运动轨迹很简单，translate3d向上向屏幕外移动就行了，因为logo在消失之后还会继续面板动效，所以我假定logo动效大概占总动效时长 2/3。将动画绑定了滚动时间线后，只需要观察在logo从顶部消失时，滚动条大概滚动了 2/3 即可，慢慢调整参数。

❗需要注意的是：因为logo是在快移动出屏幕时才逐渐变透明，所以需要单独设置个透明度变化的animation。

.logo {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  transform: translateX(-50%);
  animation-name: logo,logohide;
  animation-fill-mode: forwards;
  animation-timeline: --squareTimeline;
}
@keyframes logo {
  100% {
    transform: translate3d(-50%, -400px, 500px) scale(.6);
  }
}
@keyframes logohide {
  55%{
    opacity: 1;
  }
  63%,100% {
    opacity: .2;
  }
}

4. 色块动效

色块动效和logo动效差不多，也是 translate3d 的变化。因为他们作为一个整体在运动，新建个色块盒子，所有色块都扔里面设置绝对定位，通过 translateZ 呈现3d效果。

.blocks {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  animation-name: block;
  animation-fill-mode: forwards;
  animation-timeline: --homeTimeline;
  transform-style: preserve-3d;
  perspective: 500px;
}

.blocks span {
  --color: red;
  --left: 10%;
  --top: 10%;
  --z: 0;
  position: absolute;
  left: var(--left);
  top: var(--top);
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: var(--color);
  transform: translateZ(var(--z));
}

@keyframes block {
  100% {
    transform: translate3d(-50%, -500px, 300px);
    width: 270%;
  }
}
    

 <!-- 色块部分 -->
  <div class="blocks">
    <!-- 左色块 -->
    <span style="--color:#261758;--left: 26%;--top: 40%;--z: 120px"></span>
    <span style="--color:#c8940b;--left: 10%;--top: 60%;--z: -50px"></span>
    <span style="--color:#2059a3;--left: 15%;--top: 100%;--z: -200px"></span>
    <span style="--color:#562c0e;--left: 5%;--top: 90%;--z: -60px"></span>
    <!-- 上色块 -->
    <span style="--color:#051235;--left: 50%;--top: 40%;--z: 20px"></span>
    <span style="--color:#17113a;--left: 40%;--top: 30%;--z: -40px"></span>
    <span style="--color:#06143a;--left: 45%;--top: 70%;--z: -250px"></span>

    <!-- 右色块 -->
    <span style="--color:#072e90;--left: 70%;--top: 40%;--z: 100px"></span>
    <span style="--color:#0ca15b;--left: 80%;--top: 60%;--z: -50px"></span>
    <span style="--color:#479ec8;--left: 76%;--top: 70%;--z: 50px"></span>

    <!-- 下色块 -->
    <span style="--color:#072e90;--left: 75%;--top: 150%;--z: -300px"></span>
    <span style="--color:#061640;--left: 30%;--top: 125%;--z: -200px"></span>
  </div>
</main>
<div id="stretcher"></div>

色块.gif

5. 面板动效

面板动效是最复杂的，整体呈现为从中心点扩散成列表模式。逆向思维一下，其实这个动画的实质是先设置成列表形式，然后在动画 0% 时将所有元素移动缩小到中心点。

麻烦点来了，怎么确定每个元素移动的距离就能移动到面板中心点呢？我想了个办法，我先在面板中心显示了一个小点，如下：

7851693548650_.pic.jpg

然后在控制台不断设置元素的 translte 移动距离，直至和小点重合（先把元素scale成一个小点）。这样就可以很轻松获取到每个元素位移到中心点的距离。（ps：因为每行有7个元素，其实只需要调试获取到第一行的前四个元素的tanslate距离就行，第一行后面的三个就是把前面三个点x改为负值，第二行则负复制第一行，把y全部改为负值）