AI 摘要：本文详细介绍了如何使用 CSS 滚动驱动动画（Scroll-Driven Animations, SDA）创建一个随着用户滚动页面而动态变化的粘性标题效果。通过结合伪元素和滚动时间轴，作者展示了如何实现标题文本的动态切换和动画效果，同时兼顾了浏览器兼容性和无障碍访问。文章从基础的语义化标记开始，逐步深入到动画实现、兼容性处理及用户偏好考虑，最后鼓励读者发挥创意，探索 SDA 的更多可能性。

1. 引言与背景
• 介绍了滚动驱动动画（SDA）作为一种强大的工具，可以根据用户的滚动位置动态变换页面元素，增强网站的互动性和吸引力。
• 作者分享了通过 SDA 实现主标题（h1）文本随滚动变化的创意，并将在本文中逐步拆解实现过程。
• 强调效果仅在支持 SDA 的浏览器（如 Chromium 系）中有效，且提供了不支持时的静态回退方案。

2. 动画效果的初步解析
• 探讨了文本动画的核心原理，灵感来源于早期的打字机效果。
• 通过伪元素的 content 属性实现文本内容的动态切换，而无需依赖宽度动画或特定字体，保持灵活性。

3. 构建基础结构
• 从语义化标记入手，使用 <main> 和 <section> 结构，包含多个带有标题和内容的section（如“Primary Colors”主题）。
• 初始 CSS 仅做基础样式调整，确保内容静态、语义化和无障碍访问，为后续动画效果奠定基础。

4. 添加滚动驱动标题
• 在页面顶部添加一个额外的 <h1> 作为动画标题，并通过 aria-hidden="true" 确保其对屏幕阅读器不可见。
• 其他静态标题使用 .srOnly 类隐藏视觉呈现，但保留无障碍访问支持，确保语义完整性。

5. 兼容性处理
• 使用 @supports (animation-timeline: scroll()) 检查浏览器对 SDA 的支持，不支持时隐藏动画标题，显示静态内容。
• 确保无障碍技术和不支持 SDA 的浏览器用户仍能访问完整内容。

6. 实现粘性标题
• 通过 position: sticky 和 top: 0 让动画标题固定在视口顶部。
• 添加背景、边距等样式优化视觉效果，确保标题在滚动中清晰可见。

7. 关键帧与滚动位置
• 使用自定义脚本显示滚动进度百分比，帮助确定标题切换的精确位置（如 30%、60%、90%）。
• 通过伪元素的 content 属性和滚动时间轴，设置关键帧以切换标题文本。

8. 文本动画细节
• 清除动画标题的初始内容，使用伪元素动态填充文本。
• 设置 animation-timing-function: step-end，确保文本在指定关键帧处精准切换。
• 手动编写关键帧，逐步增减字符，模拟打字动画效果，增强过渡自然感。

9. 用户偏好与无障碍
• 考虑 prefers-reduced-motion 偏好，使用媒体查询禁用动画，提供静态替代方案，照顾对运动敏感的用户。
• 强调无障碍设计，确保内容对所有用户可访问。

10. 效果扩展与创意
• 提出动画标题的多样化实现，如固定部分文本，单独动画其余部分，或通过 SDA 改变颜色、背景等。
• 展示如何叠加多个滚动驱动动画，丰富视觉效果。

11. 总结与号召
• 强调 SDA 不仅是炫酷技巧，更是网页设计的革新工具，能显著提升用户体验。
• 鼓励读者尝试 SDA，探索创意可能性，并分享作品、想法或问题，激发社区交流。

CSS-Tricks

Scroll-Driven Sticky Heading | CSS-Tricks

I was playing around with scroll-driven animations, just searching for all sorts of random things you could do. That’s when I came up with the idea to animate main headings and, using scroll-driven animations, change the headings based on the user’s scroll…