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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1474 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

20 条回复 • 2020-11-17 10:14:54 +08:00

GeQi

2020-11-15 22:17:00 +08:00

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

dingdangnao

2020-11-15 22:25:04 +08:00 via iPhone

很卡😂

Shingekinoshinji

2020-11-15 22:26:17 +08:00

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

bipy

2020-11-15 22:27:43 +08:00

i3 都不卡

Cyanhall

2020-11-15 22:28:49 +08:00

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

mahaonan1994

2020-11-15 22:32:21 +08:00

这也能吹？
这也敢吹！

cydian

2020-11-15 22:44:47 +08:00

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

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

miyuki

2020-11-15 23:08:34 +08:00 via Android

挺好的

Ptu2sha

2020-11-15 23:13:11 +08:00

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

mxalbert1996

2020-11-15 23:30:52 +08:00 via Android

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

mahaonan1994

2020-11-15 23:39:50 +08:00

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

linyuxin

2020-11-16 00:45:05 +08:00 via Android

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

varzy

2020-11-16 06:22:29 +08:00 via iPhone

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

chloelam101

2020-11-16 10:03:44 +08:00

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

red2dog

2020-11-16 11:12:17 +08:00

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

chloelam101

2020-11-16 11:37:57 +08:00

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

red2dog

2020-11-16 14:07:22 +08:00

@chloelam101 我说 b 站那个

ccc825

2020-11-16 16:14:44 +08:00

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

wwbfred

2020-11-17 08:27:10 +08:00

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

CrazyRundong

2020-11-17 10:14:54 +08:00 via iPhone

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