滚动驱动的动画 是网络上常见的用户体验模式。滚动式推动 动画与滚动容器的滚动位置相关联。这意味着 这样,当您向上或向下滚动时,关联的动画就会向前或向后拖动 进行直接反应。例如,视差背景等效果 图片或阅读指示器,它们会随着您滚动而移动
开发者通常使用 JavaScript 来创建滚动条驱动的动画 来响应主线程上的滚动事件。这使得创建 与滚动同步的高性能滚动驱动动画,原因在于 滚动事件异步传送,通常因 都位于主线程上
不过,作为新的 CSS 和界面功能登陆浏览器, 你现在可以 创建声明式滚动驱动动画。带滚动时间轴和视图 时间表,与现有现有概念相集成的新概念 Web Animations API (WAAPI) 和 CSS Animations API 你现在可以获得丝滑的 在主线程以外运行滚动条驱动的动画, 代码。阅读本案例研究,了解 Tokopedia、redBus 和 Policybazaar 的 已经受益于这项新功能
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
-
<ph type="x-smartling-placeholder">
Tokopedia
Tokopedia 将之前的自定义 JavaScript 实现替换为了 滚动条驱动的动画,以优化网页性能,并增强 整体浏览体验。
。 <ph type="x-smartling-placeholder">与使用传统算法相比, 并观察到,平均 CPU 使用量 从 50% 降低至 2%,即: Andy Wihalim, Tokopedia 高级软件工程师
代码
以下实现使用 scroll()
函数设置匿名滚动
进度时间轴,用于控制 CSS 动画的进度。通过
顶部粘性栏的可见性会随着
已定义 animationRange
。
const toggleBar = keyframes({
to: { height: 48 },
});
export const cssWrapper = css({
position: 'fixed',
left: 0,
width: '100vw',
pointerEvents: 'none',
marginTop: 120,
height: 0,
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-end',
animation: `${toggleBar} linear both`,
animationTimeline: 'scroll()',
animationRange: '20px 70px',
});
redBus
redBus 在移动设备和桌面设备上分别提供了不同的动画效果, 推荐活动着陆页 在转化漏斗早期阶段向所有用户展示对于滚动驱动的动画,它们 能够将这些自定义 JavaScript 实施替换为 CSS 效果一样
使用场景
带有图片显示的图库(适用于 和翻唱歌曲流程(适用于 桌面设备)。
<ph type="x-smartling-placeholder">代码(手机)
在前面的示例中,Tokopedia 使用匿名滚动进度
时间轴。在以下代码中,redBus 使用指定的视图进度
时间轴。动画会更改 <img>
的 opacity
和 clip-path
定义的 animation-range
内的元素,位于该元素最近的元素内
祖先滚动条,在本例中为图库滚动条。
const reveal = keyframes`
from {
opacity: 0;
clip-path: inset(45% 20% 45% 20%);
}
to {
opacity: 1;
clip-path: inset(0% 0% 0% 0%);
}`
const CardImage = styled.div`
width: 100%;
height: 100%;
img {
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
height: 100%;
width: 100%;
object-fit: cover;
view-timeline-name: --revealing-image;
view-timeline-axis: block;
/* Attach animation, linked to the View Timeline */
animation: linear ${reveal} both;
animation-timeline: --revealing-image;
/* Tweak range when effect should run*/
animation-range: entry 25% cover 50%;
}
`;
我们非常高兴能看到这一功能 完美结合了广告效果 改善了网页体验,从而提升搜索引擎优化 (SEO) 的“网页体验”衡量因素。顶部 极短的学习曲线使其成为所有电子商务的必备工具 网站。我们还获得了其他团队的积极反馈和支持 SDA(用于更多用户体验历程)- Amit Kumar,高级工程团队 redBus 经理。
政策集市
比较保险计划是用户反复采取的重要行动, 决策制定流程。通过使用滚动条驱动的动画,Policybazaar 将 指定低优先级元素的尺寸,以响应用户滚动表格的操作。本次 这样既能提供流畅的滚动体验,又能提高可读性。
。 <ph type="x-smartling-placeholder">借助滚动驱动的动画,我们能够最大限度地扩大 方便用户比较各方案,确保阅读内容专注且井然有序 —Rishabh Mehrotra,主管 Design for Life Insurance BU,PolicyBazaar。
animate-timeline
LOB(业务线)。代码
与之前来自 Tokopedia 的示例类似,Policybazaar 使用
scroll()
函数,用于为以下对象设置匿名滚动进度时间轴:
控制 CSS 动画的进度。在本示例中,缩小字体
并根据定义的
animation-range
。
@supports (animation-timeline: scroll()) {
.plan-comparison .inner-header {
animation: move-and-fade-header linear both;
}
.plan-comparison .left-side {
animation: shrink-name linear both;
}
.plan-comparison .inner-header, .plan-comparison .left-side {
animation-timeline: scroll();
animation-range: 0 150px;
}
}
@keyframes move-and-fade-header {
to {
translate: 0% -5%;
top:103px;
}
}
@keyframes shrink-name {
to {
font-size: 1.5rem;
}
}
滚动条驱动的动画是整个用户体验历程中的一种常见模式
所有精选电子商务公司都在网页上使用了滚动驱动的动画 以及为卡片添加动画效果,以吸引用户的注意力 。通过 以下示例显示了用户不同部分的卡片的滚动效果 这通常使用匿名观看进度时间轴来实现 用于控制自定义 CSS 动画的进度, 以下 CSS 代码段。
@keyframes animate-in {
0% { opacity: 0; transform: translateY(10%); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes animate-out {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-10%); }
}
.flyin_animate {
animation: animate-in linear forwards;
animation-timeline: view();
animation-range: entry;
}
redBus(首页)
<ph type="x-smartling-placeholder">Policybazaar(商品详情页)
<ph type="x-smartling-placeholder">Tokopedia(“商品详情”页面)
<ph type="x-smartling-placeholder">使用滚动驱动的动画 API 时的注意事项
对于不支持的浏览器,可以对滚动驱动的动画执行 polyfill 操作, 例如使用 滚动时间轴 polyfill。 否则 需要进行额外的测试,以确保它能与您的 框架,并且使用 polyfill 的浏览器不会遇到动画 出现故障或卡顿等问题
在 CSS 中,您可以使用 @supports
来测试是否支持动画时间轴
然后再使用滚动驱动的动画例如:
@supports (animation-timeline: scroll()) {
}
资源
- 滚动条驱动的动画演示
- 使用滚动条驱动的动画,在滚动时为元素添加动画效果
- Codelab:开始在 CSS 中使用滚动驱动的动画
- Chrome 扩展程序:滚动条驱动的动画调试程序
- 滚动时间轴 Polyfill
- 要报告 bug 或报告新功能吗?我们期待收到您的反馈意见!
敬请阅读本系列中的其他文章,这些文章介绍了电子商务公司如何通过使用新的 CSS 和界面功能(例如视图过渡、弹出式窗口、容器查询和 has()
选择器)获益。