当前位置：首页 > news >正文

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

news 2025/9/11 8:15:16

引言

本篇为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%中间的部分*/