【CSS Tricks】鼠标滚轮驱动css动画播放，使用js还是css？

news2024/11/22 1:54:33

引言

本篇为css的一个小技巧

页面中的动画效果随着滚轮的转动而播放，会使用户的参与感更强烈。滚轮从上至下，动画跟随从第一帧到最后一帧。可以来回滚动，实现动画时空回溯的效果。如果将动画主体替换为网站主题内容，则可以大大加深用户对于网站宣传内容的印象。

一、js实现

动画绑定滚轮的核心在于有一个进度的时间线。可以通过鼠标滚轮告诉网页，进度到了哪个节点，那么动画也就自然跳动到对应百分比的帧数。

1. 实现思路

设置好动画关键帧，为了方便计算，将动画周期设置为1s。
利用 animation-delay 为负值的特性，将动画提前某个时间点播放。
通过js脚本监听window的scroll事件，设置全局变量scroll，其值为当前页面滚动距离占内容长度减去窗口高度的百分比（这里需要思考一下）。
animation-delay 使用函数计算scroll值与动画周期1s的乘积取负值。
此时鼠标滚动，动画跳动到对应帧数，实现动画绑定滚轮的效果。

关于css动画参数的详细解读，请参考：【CSS Tricks】css动画详解

2. 实现案例

拿代码到本地跑一下看看效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      padding: 0;
      margin: 0;
      min-height: 500vh;
      background-color: rgb(139, 201, 228);
      animation: body 1s linear;
      animation-play-state: paused;
      animation-delay: calc(var(--scroll) * -1s);
      animation-fill-mode: forwards;
    }
    @keyframes body {
      to {
        background-color: rgb(19, 48, 97);
      }
    }

    .box {
      width: 300px;
      height: 300px;
      border-radius: 10px;
      background: #df685b;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: box 1s linear;
      animation-play-state: paused;
      animation-delay: calc(var(--scroll) * -1s);
      animation-fill-mode: forwards;
    }
    @keyframes box {
      to {
        transform: translate(-50%, -50%) rotate(180deg);
      }
    }
  </style>
  <body>
    <div class="box"></div>
  </body>
  <script>
    window.addEventListener(
      "scroll",
      () => {
        document.body.style.setProperty(
          "--scroll",
          window.pageYOffset / (document.body.offsetHeight - window.innerHeight)
        );
      },
      false
    );
  </script>
</html>

解读一下代码：

css部分主要疑问点在 animation-play-state 、animation-delay 、animation-fill-mode 这三个属性:
- animation-play-state 设置为 paused ，表示我不希望这个动画会自动播放，而是时时刻刻都是停止状态。我需要动画可以跟随滚轮只表现关键帧而不播放。
- animation-delay 是实现这个效果的核心，我们会通过js提供一个[0,1]区间的 scroll 值。动画总周期是1s，可以通过-1乘以 scroll 值，获得一个[-1,0]的值。delay取负值表示提前到某一帧开始播放动画，又因为 animation-play-state 设置为 paused ，所以会得到动画绑定滚轮的效果。
- animation-fill-mode设置为 forwards ，表示当 delay 为-1时，不跳回到第一帧而是继续保持最后一帧的画面，避免出现滚动到底时画面突然变为初始状态的情况。
js部分主要疑问点在于计算 scroll 值:
- 如下图示意，滚动的最大距离为 window.pageYOffset ，计算滚动距离的参考位置时窗口的上边缘。

3. 看下效果

注意观察滚动条位置

在这里插入图片描述

二、css实现

继续以js实现的代码为基础修改内容。

1. 代码修改

将script部分代码全部删掉
将css部分按照如下内容修改：

    body {
      padding: 0;
      margin: 0;
      min-height: 500vh;
      background-color: rgb(139, 201, 228);
      animation: body 1s linear;
      animation-timeline: scroll();
    }
    @keyframes body {
      to {
        background-color: rgb(19, 48, 97);
      }
    }

    .box {
      width: 300px;
      height: 300px;
      border-radius: 10px;
      background: #df685b;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: box 1s linear;
      animation-timeline: scroll();
    }
    @keyframes box {
      to {
        transform: translate(-50%, -50%) rotate(180deg);
      }
    }

这样就够了，此时页面效果和js实现结果一样。

2. 属性介绍

animation-timeline，目前还处于试验阶段。

指定用于控制CSS动画进度的时间轴。

2.1 看下浏览器支持性

目前只有70%左右的支持度，基本上只有最新版的chrome内核浏览器和opera浏览器可以支持。
在这里插入图片描述

2.2 常用属性值

默认值：none，无事发生。

2.2.1 scroll（）

使用方式：

  animation-timeline: scroll();

scroll（）CSS函数表示在顶部和底部（或左侧和右侧）之间滚动滚动条来进行时间轴绑定。滚动范围中的位置将转换为进度百分比，开始时为0%，结束时为100%。

scroll（）函数的传参值有两个，一个是指定滚动条元素，一个是滚动轴向
常见使用方法：

/* 一般写这个就行 */
animation-timeline: scroll();
/* 指定滚动条元素 */
animation-timeline: scroll(nearest); /* 找最近的具有滚动条的祖先元素，可以是self */
animation-timeline: scroll(root); /* 文档根元素 */
animation-timeline: scroll(self); /* 自身 */
/* 指定滚动轴向，一般就选这俩。纵向和横向 */
animation-timeline: scroll(y);
animation-timeline: scroll(x);
/* 如果喜欢两个参数都写，举例 */
animation-timeline: scroll(y nearest);

2.2.2 view（）

使用方式：

  animation-timeline: view();

view（）CSS函数在可视区域指定一个区间，当元素经过这个区间时开始进行时间轴进度。从元素进入区间为0%，完全离开区间为100%。

view（）函数的传参值有两个，一个是指定滚动轴向，一个是指定视图区域，可视区域可以有两个值。（最多总共三个值）
常见使用方法：

/* 一般写这个就行，表示当需要动画的元素出现在屏幕可视范围内，即可开始根据滚动轴作为时间线操控动画 */
animation-timeline: view();

/* 非要写话就写x、y就好，不写默认是block相当于y */
animation-timeline: view(y);
animation-timeline: view(x);

/* 设置可视区域 */
animation-timeline: view(auto); /* 全部可视区域*/
animation-timeline: view(20%); /* 从可视区域顶部20%到底部0%中间的部分*/
animation-timeline: view(20% 40%);/* 从可视区域顶部20%到底部40%中间的部分*/

举个例子：

   animation-timeline: view(50% 10%);/* 从可视区域顶部50%到底部10%中间的部分*/

在这里插入图片描述

三、总结

CSS的创建者曾说过，他最初的设想是CSS作为控制网页行为的主要Web技术。只有当CSS无法完成控制行为时，才使用js脚本作为后备手段。

如果在不考虑浏览器支持性的前提下（优先使用chrome最新版本浏览器），项目中有做滚动条绑定动画的需求，我非常建议大家尝试一下animation-timeline ，它会给你一种全新的开发体验，在实现相同效果的情况下，页面性能优化最佳。

再接再厉~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2204193.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！