B 站 PC 端首页的动态 Banner 挺有意思的。

[linyuxin]

F12 看了一下 HTML 是一层一层的 layer 图片，根据鼠标位置计算图片平移和模糊程度的（ filter 和 transform 属性）

[GeQi]

Performance 极差，Load Time 超长，观感也不好，完全不知道想表达什么效果。想喷这个设计很久了。

[dingdangnao]

很 卡😂

[Shingekinoshinji]

很卡+1，是我电脑不行了吗

[bipy]

i3 都不卡

[Cyanhall]

刚看到新鲜的制作教程：[BiliBili 秋 • 头图景深对焦效果]( https://www.bilibili.com/video/BV1NZ4y1G7fN)

[mahaonan1994]

这也能吹？
这也敢吹！

[cydian]

1 楼和 6 楼是什么问题？
挺有意思 = 性能挺好？
六楼觉得自己能访问 pageSpeedInsights 就很什么？

回复楼主：
这样实现 3D 效果真不错

[miyuki]

挺好的

[Ptu2sha]

@cydian 难道一个产品不应该设计的对大众友好么

[mxalbert1996]

@mahaonan1994 这种含有大量图片的网页低于平均值太正常了，你测一下 YouTube，比 B 站还低。

[mahaonan1994]

@mxalbert1996 油管只有 29 ！！！原来分数低是这个原因！我这几天为了把自己的网站分数提上去按照下面的建议折腾了好久......

[linyuxin]

@Cyanhall 好家伙 教学视频都做出来了

[varzy]

Mac 下火狐访问能卡出翔（其他系统没试过），现在用火狐都不敢把鼠标移上去😌

[chloelam101]

我的也做出来了很久了，http://chloe-lam.github.io/bilibili-parallax-fall，嘻嘻

[red2dog]

这个如果用火狐或者沙发瑞点击 会卡出翔。

[chloelam101]

@red2dog 不会阿，https://chloe-lam.github.io/bilibili-parallax-fall/ 你可以用 pc 试试，我这里比 B 站了多使用个 css 3 translateZ 启用 GPU，我 snapcap memory 都很少内存开销

[red2dog]

@chloelam101 我说 b 站那个

[ccc825]

@red2dog 试了一下 firefox 确实卡出屎。刚从 chrome 换到 firefox 你不说我都没注意到。还有就是弹幕掉帧

[wwbfred]

啊,B 站那乌七八糟的首页实在是受不了,已经强制把首页 redirect 到 https://www.bilibili.com/anime 很久了.

[CrazyRundong]

原来是多层图像叠加吗？我还以为是光场成像