search

bczFE / articles

📚 百词斩前端写文章的地方
8 stars 1 forks source link

iPhone 14 Pro 详情页浅析 #19

Open gaoryrt opened 2 years ago

gaoryrt commented 2 years ago

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

gaoryrt commented 2 years ago

image 3个域，79个资源，14.7M，第二次加载还是用了 7M，除了 html 之外还有个巨大的 mp4，用来做首屏的动画： Oct-24-2022 17-04-53 同样的，一个视频四张图做 fallback： image

gaoryrt commented 2 years ago

Oct-24-2022 17-09-28 跟随滚动的文字渐变还是用了 mixed-blend-mode，配合一张渐变的背景就完事儿了： image

gaoryrt commented 2 years ago

Oct-24-2022 17-15-10 你以为这是个字母o，但是他是一个border修改宽度实现的： image

gaoryrt commented 2 years ago

几个简单的css动画： image 自定义一个 progress： image 里面用 mask-image 来做遮罩： image

gaoryrt commented 2 years ago

image 切颜色这里用的是 opacity transition image

gaoryrt commented 2 years ago

Oct-24-2022 17-29-06 这个就很暴力了，直接五张图一人一个 matrix 跟随滚动变化： image 再夸一句，alt 写得很仔细

gaoryrt commented 2 years ago

Oct-24-2022 17-32-32 传统艺能来了，滚动控制mp4帧动画，源文件在这里： https://www.apple.com.cn/105/media/us/iphone-14-pro/2022/a3e991f3-071e-454c-b714-1b2319bb97a8/anim/a16/large.mp4

gaoryrt commented 2 years ago

image 简单的 css 动画，用了个伪元素 + mix-blend-mode image 改这个 width 值就行

gaoryrt commented 2 years ago

就差不多了，等我看完整个页面又加载了： image