苹果新款耳机这个页面好炫，有巨巨知道是怎么做的么~

[withzhaoyu]

https://www.apple.com/cn/airpods-pro/

[delectate]

windows10，换了 4 个浏览器（ firefox、ie、edge、chrome ）也没看出来哪里吊炸天了。
对比 如红米 k20p，我没看出来区别： https://www.mi.com/redmik20pro

是不是楼主比较 out，没见过世面？还是我显示器出问题了？
（如果是果粉信仰加成，当我没说过任何）

[delectate]

收回前言……被打脸了，是我网络问题。

[withzhaoyu]

@delectate 抱歉。我也不是果粉。苹果安卓都用。只是比较好奇里面的动效怎么做的。不要误解奥 XD ,

[delectate]

再次收回前言，不是网络问题，和高度有关，如果是按 f12，或者没有全屏，就是普通的页面；
fhd 或者 4k 全屏，才能看出来效果。我读一下页面代码吧。

[withzhaoyu]

@delectate ~~~ hh，问题不大~

[huoshanhui]

比如说最开始的耳机效果是 148 张图片组成的效果。

[withzhaoyu]

@delectate 感谢巨巨 XD。

[ChefIsAwesome]

相当于放个视频，鼠标滚轮控制进度条。如果不是为了盲人啥的，肯定直接就放视频了。这还切几百个图，N 段话。可能有特定的软件能生成这种。

[delectate]

https://s2.ax1x.com/2019/10/29/KRWjgg.png

比较急着去跑步，没太多时间看代码了……
看了一下请求的信息，估计是一帧帧下载并缓存，根据滚轮位置，渲染某一图片。
这样请求多，服务器压力也大（看上图）。

[withzhaoyu]

@huoshanhui 几百张图？我还以为是 css3 旋转之类的动效。这也太暴力了吧

[chenjunyue520]

canvas + 多个背景图， 这个页面切的呀。设计师和前端是真牛逼

[withzhaoyu]

@withzhaoyu
@chenjunyue520 看了下还真是，将近 300 张图太吓人了。。

[xenme]

滚动控制进度，pc 和 iPhone 上卡成狗了。用鼠标快一点才好一点

[CloudnuY]

这次是 jpg 序列，滚动切换图

以前苹果用过 mp4，滚动改变播放时间轴

[withzhaoyu]

@xenme
@huoshanhui
一个页面 1576 个资源请求 _(:з」∠)_。。。。。。真是太暴力了。。。

[fancy111]

设计不错啊，监听滚轮，还可以回放。
楼上要不你设计个更炫酷的？

[SpiritQAQ]

昨天晚上睡觉之前看到被秀了一脸愣是看了开发者工具半个多小时...这设计牛逼

[withzhaoyu]

@SpiritQAQ 我今天也是别人发链接推荐我买，然后我一打开页面就惊了，打开 f12 开始看

[redam]

F12 看请求，全是图片，通过 canvas 来监听滚轮来一帧帧展现图片（ canvas 我不熟 hhhh ）

[withzhaoyu]

@redam nice，nice