iPad 10.9 详情页浅析

[gaoryrt]

iPad 10.9 发布几天了，来看看有啥值得学习的

[gaoryrt]

苹果页面向来会做特别多操作系统、设备、语言、可用性上的兼容（which is good），本次测试也没法全测，所以用的机器是 MacOS 10.15.7，浏览器也是自家的 Safari 15.0，希望这个是他们的目标环境。

[gaoryrt]

三个域，73个资源，7.78兆，重新加载后就只有主 html 和两个字体文件重新加载了，37.9k

[gaoryrt]

关键的元素在这里：

右边是俩关键属性，禁用掉就知道原理了：
sticky-content 里面是 fixed 视频，path-reveal-mask 使用 mix-blend-mode: lighten 做的动态遮罩。
跟随滚动出现和消失的是两个 svg，（这里 figma 没有给我加宽度，还给自动闭合了……）就是俩曲线：

svg 里面有一个 stroke，宽度 99px，跟随滚动修改 stroke-dashoffset，就达到了动态笔触的效果了：

[gaoryrt]

这地方先用了个 mp4 做动画，播完又给换成图片了：

用于屏幕朗读的一个文字描述，以及四个不同尺寸屏幕的图，一张变四张……

这个也一样的

[gaoryrt]

这个也是

[gaoryrt]

就结束了！没了！
特效都不舍得多给两个，还得是你啊库克