AI 摘要：本文详细介绍了如何利用新兴的 CSS 滚动驱动动画技术，以纯 CSS 的方式重新实现经典的视差滚动 (Parallax) 效果。与传统的 JavaScript 方案相比，这种新方法将动画移出主线程运行，从而显著提升了性能和流畅度。文章通过实例讲解了 animation-timeline 属性的两种核心时间轴函数 scroll() 和 view() 的使用场景与区别，并进一步介绍了如何使用 animation-range 属性精确控制动画的触发时机与范围，最后还探讨了针对运动敏感用户的无障碍设计和浏览器兼容性的回退方案。

CSS-Tricks

Bringing Back Parallax With Scroll-Driven CSS Animations | CSS-Tricks

Parallax is a pattern in which different elements of a webpage move at varying speeds as the user scrolls, creating a three-dimensional, layered appearance. It once required JavaScript. Now we have scroll-driven animations in CSS, which is free from the main…