首页 >web前端 >css教程 >CSS滚动式式运动偏爱

CSS滚动式式运动偏爱

Christopher Nolan
Christopher Nolan原创
2025-03-14 10:39:12466浏览

CSS Scroll-Timeline With Motion Preference

快速浏览要点:

  • Mary Lou 发布了一个典型的 Codrops 风格演示,名为“Alternate Column Scroll”。
  • 滚动效果由 Locomotive Scroll 提供支持,我们之前也巧合地介绍过它。
  • Bramus 一直在探索使用未来的 CSS Scroll-Timeline 功能实现原生 CSS 滚动效果。他为此撰写了一个四部分的深入探讨系列文章,从这里开始。
  • 虽然还处于早期阶段,但在 Chrome 中已经标记了 @scroll-timeline。Bramus 也向我们展示了此功能在 CSS-Tricks 上的强大用途,尤其是在与 WAAPI 结合使用时。
  • 因此,Bramus 着手重建演示的滚动方面(中间列自然滚动,外侧两列反向滚动)。事实证明,您可以使用 polyfill 并添加一些 WAAPI 来很好地复制它。很酷。

结合 prefers-reduced-motion 使用 CSS Scroll-Timeline

我唯一要补充的是,需要考虑 prefers-reduced-motion 属性,因为这种滚动动画可能会影响容易晕动的人。为此,您可以将测试与 JavaScript 中的支持测试结合在同一行:

if (
    !CSS.supports("animation-timeline: foo") && 
    !window.matchMedia('(prefers-reduced-motion: reduce)').matches
   ) {
     // 执行炫酷效果
}

我不确定最好是测试无偏好设置还是 reduce 的反面。无论哪种方式,CSS 中的技巧是将您要使用 @scroll-timelineanimation-timeline 执行的任何操作都包装在 @supports 测试中(如果您想执行其他操作),然后将 该测试 包装在偏好设置测试中:

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: works) {

      /* 执行炫酷效果 */

    }

}

这是一个演示,所有功劳都归于 Bramus,是他让这一切得以实现。

哦,你知道吗?如果 @when 成为一项功能,CSS 会变得更简洁:

@when supports(animation-timeline: works) and media(prefers-reduced-motion: no-preference) {

} @else {

}

以上是CSS滚动式式运动偏爱的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn