HTML5 | AirPods Pro 官网前端实现解析

前言

本文将分析 AirPods Pro 产品介绍使用的技巧与有趣的第三方库

滚动长画幅

这次AirPods Pro 的产品介绍以一个由用户手动进行滚动推进的长画幅组成。
这个长画幅由canvas帧动画完成。

实现细节

• 本次产品展示的帧动画涉及1571个图片，如果一次性加载，那么首画加载时间将非常之长，用户体验可想而知。
  
  因此苹果前端将动画拆分成10个画布，通过z-index和opacity控制实际呈现的动画阶段。
  
• 在长画幅中，存在画幅下降的效果，并不是canvas动画，而是通过CSS3动效对画布进行整体移动实现的。
  

语义化标签

Apple公司有很多员工是W3C协会的会员。整个AirPods Pro的HTML书写使用着极为准确的语义化标签。

语言的本地化

作为跨国公司，页面的国际化除了语义，也包含了字体样式。