NRK 如何使用滚动驱动的动画来赋予故事生命  |  博客  |  Chrome for Developers

主要观点:滚动驱动动画从早期的卡顿 JavaScript 实现发展到如今利用现代 CSS 和 UI 特性(如滚动时间线和视图时间线)实现的流畅、可访问且离线程的体验,能提升原型设计和高性能动画效果,NRK 团队将其应用于故事讲述等方面以增强用户体验。
关键信息:

  • NRK 是挪威的公共服务广播公司,其团队致力于各种编辑项目,滚动驱动动画可增强故事性。
  • 滚动驱动动画能引导用户注意力、简化复杂信息、设定氛围、打破文本并提供视觉缓解,且需尊重无障碍需求和用户偏好。
  • NRK 开发并集成新的滚动动画工具到 Sanity CMS 中,方便设计师操作。
  • 多个具体案例展示了不同类型的滚动动画,如《The man who wasn't missed》《Permafrost》等。
  • 还介绍了多种滚动动画技术,如滚动动画触发常规动画、突出滚动捕捉项等。
  • NRK 有多种可插入自定义元素的 Web 组件,其 JavaScript 实现也有良好表现,且在浏览器支持方面使用开源填充库。
    重要细节:
  • 用户反馈滚动动画有助于理解故事重点,动画可动态构建、添加或突出信息。
  • 无障碍方面要考虑不同设备和用户需求,避免引起不适。
  • 浏览器支持检测时使用 CSS 支持和填充库,通过 CSS 变量作为 fallback。
  • 提供了丰富的资源供学习和参考,包括案例研究、演示、教程等。
阅读 9
0 条评论