Web开发者时常会碰到使用滚动来触发某些元素的动画效果,比如说,页面滚动条滚动到某个位置,标题固定在顶部;页面顶部展示你页面进度(滚动指示器);还是一些我们所说的视差滚动效果等。
往实现这些效果,大都借助JavaScript来实现,可以通过dom事件查看滚动位置,并根据该位置更改元素的样式。如果可以的话,最好使用 IntersectionObserver。
不过,现在有一个关于这方面的css草案,即 Scroll-linked Animations。也就是说,在未来,我们可以直接使用CSS的 @scroll-timeline 属性来实现前面提到的一些动画效果。
@scroll-timeline = @scroll-timeline <timeline-name> { <declaration-list> }
@scroll-timeline 能够设定一个动画的开始和结束由滚动容器内的滚动进度决定,而不是由时间决定。意思是,我们可以定义一个动画效果,该动画的开始和结束可以通过容器的滚动来进行控制。
@scroll-timeline 语法介绍
接下来,我们先缓一缓,简单看一看 @scroll-timeline 的语法。
使用 @scroll-timeline,最核心的就是需要定义一个 @scroll-timeline 规则:
@scroll-timeline moveTimeline {
source: selector("#g-content");
orientation: vertical;
scroll-offsets: 0px, 500px;
}
其中:
source:绑定触发滚动动画的滚动容器
source: auto:绑定到 Document,也就是全局 Windows 对象
source: selector("id-selector"),通过 selector(),内置一个 #id 选择器,选取一个可滚动容器
source: none:不指的滚动容器
orientation:设定滚动时间线的方向
orientation: auto:默认为 vertical,也就是竖直方向的滚动
orientation: vertical:竖直方向的滚动
orientation: horizontal:水平方向的滚动
orientation: block:不太常用,使用沿块轴的滚动位置,符合书写模式和方向性
orientation: inline:不太常用,使用沿内联轴的滚动位置,符合书写模式和方向性
scroll-offsets:滚动时间线的核心,设定在滚动的什么阶段,触发动画,可通过三种方式之一进行设置:
scroll-offsets: none 这意味着没有 scroll-offset 指定。
由逗号分隔的值列表确定。每个值都映射到animation-duration。例如,如果 ananimation-duration 设置为 2s 且滚动偏移量为 0px, 30px, 100px,则在 1s 时,滚动偏移量将为 30px。
第三种确定滚动偏移量的方法是使用元素偏移量。这意味着可以指定页面内的元素,其位置决定了滚动时间线以及要使用这些元素的哪个边缘。指定元素是使用 selector() 函数完成的,该函数接收元素的 id。边缘由关键字 start 或确定 end。可选的阈值的 0–1 可用于表示元素滚动中预期可见的百分比。
scroll-offsets 的理解会比较困难,我们稍后详述。
在设定了一个 @scroll-timeline 之后,我们只需要将它和动画绑定起来即可,通过 animation-timeline:
@scroll-timeline moveTimeline {
source: selector("#g-content");
orientation: vertical;
scroll-offsets: 0px, 500px;
}
div {
animation-name: move;
animation-duration: 3s;
animation-timeline: moveTimeline;
}
@keyframes move{
0% {
transform: translate(0, 0);
}
100% {
transform: translate(100%, 0);
}
}
@scroll-timeline 的实验室特性与特性检测
@scroll-timeline 虽好,目前仍处于实验室特性时间,在最新的 chrome、Edge、Opera 可以通过浏览器配置开启该特性,Chrome 下开启该特性需要:
浏览器 URL 框输入 chrome://flags
开启 #enable-experimental-web-platform-features
特性检测
基于目前的兼容性问题,我们可以通过浏览器的特性检测 @supports 语法,来渐进增强使用该功能。
特性检测的语法也非常简单:
@supports (animation-timeline: works) {
@scroll-timeline list-item-1 {
source: selector(#list-view);
start: selector(#list-item-1) end 0;
end: selector(#list-item-1) end 1;
scroll-offsets:
selector(#list-item-1) end 0,
selector(#list-item-1) end 1
;
time-range: 1s;
}
// ...
}
通过 @supports (animation-timeline: works) {} 可以判断浏览器是否支持 @scroll-timeline。
学习更多技能
请点击下方公众号