【CSS Tricks】鼠标滚轮驱动css动画播放，使用js还是css？
目录
- 引言
- 一、js实现
- 1. 实现思路
- 2. 实现案例
- 3. 看下效果
- 二、css实现
- 1. 代码修改
- 2. 属性介绍
- 2.1 看下浏览器支持性
- 2.2 常用属性值
- 2.2.1 scroll（）
- 2.2.2 view（）
- 三、总结
引言
本篇为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 ，它会给你一种全新的开发体验，在实现相同效果的情况下，页面性能优化最佳。
再接再厉~