V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
linyuxin
V2EX  ›  分享发现

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

  •  
  •   linyuxin · 2020-11-15 21:49:23 +08:00 · 3877 次点击
    这是一个创建于 1461 天前的主题,其中的信息可能已经有所发展或是发生改变。
    F12 看了一下 HTML 是一层一层的 layer 图片,根据鼠标位置计算图片平移和模糊程度的( filter 和 transform 属性)
    20 条回复    2020-11-17 10:14:54 +08:00
    GeQi
        1
    GeQi  
       2020-11-15 22:17:00 +08:00   ❤️ 6
    Performance 极差,Load Time 超长,观感也不好,完全不知道想表达什么效果。想喷这个设计很久了。
    dingdangnao
        2
    dingdangnao  
       2020-11-15 22:25:04 +08:00 via iPhone
    很 卡😂
    Shingekinoshinji
        3
    Shingekinoshinji  
       2020-11-15 22:26:17 +08:00
    很卡+1,是我电脑不行了吗
    bipy
        4
    bipy  
       2020-11-15 22:27:43 +08:00
    i3 都不卡
    Cyanhall
        5
    Cyanhall  
       2020-11-15 22:28:49 +08:00
    刚看到新鲜的制作教程:[BiliBili 秋 • 头图景深对焦效果]( https://www.bilibili.com/video/BV1NZ4y1G7fN)
    mahaonan1994
        6
    mahaonan1994  
       2020-11-15 22:32:21 +08:00
    这也能吹?
    这也敢吹!
    cydian
        7
    cydian  
       2020-11-15 22:44:47 +08:00   ❤️ 17
    1 楼和 6 楼是什么问题?
    挺有意思 = 性能挺好?
    六楼觉得自己能访问 pageSpeedInsights 就很什么?

    回复楼主:
    这样实现 3D 效果真不错
    miyuki
        8
    miyuki  
       2020-11-15 23:08:34 +08:00 via Android
    挺好的
    Ptu2sha
        9
    Ptu2sha  
       2020-11-15 23:13:11 +08:00
    @cydian 难道一个产品不应该设计的对大众友好么
    mxalbert1996
        10
    mxalbert1996  
       2020-11-15 23:30:52 +08:00 via Android
    @mahaonan1994 这种含有大量图片的网页低于平均值太正常了,你测一下 YouTube,比 B 站还低。
    mahaonan1994
        11
    mahaonan1994  
       2020-11-15 23:39:50 +08:00
    @mxalbert1996 油管只有 29 !!!原来分数低是这个原因!我这几天为了把自己的网站分数提上去按照下面的建议折腾了好久......
    linyuxin
        12
    linyuxin  
    OP
       2020-11-16 00:45:05 +08:00 via Android
    @Cyanhall 好家伙 教学视频都做出来了
    varzy
        13
    varzy  
       2020-11-16 06:22:29 +08:00 via iPhone
    Mac 下火狐访问能卡出翔(其他系统没试过),现在用火狐都不敢把鼠标移上去😌
    chloelam101
        14
    chloelam101  
       2020-11-16 10:03:44 +08:00
    red2dog
        15
    red2dog  
       2020-11-16 11:12:17 +08:00
    这个如果用火狐或者沙发瑞点击 会卡出翔。
    chloelam101
        16
    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
        17
    red2dog  
       2020-11-16 14:07:22 +08:00
    @chloelam101 我说 b 站那个
    ccc825
        18
    ccc825  
       2020-11-16 16:14:44 +08:00
    @red2dog 试了一下 firefox 确实卡出屎。刚从 chrome 换到 firefox 你不说我都没注意到。还有就是弹幕掉帧
    wwbfred
        19
    wwbfred  
       2020-11-17 08:27:10 +08:00
    啊,B 站那乌七八糟的首页实在是受不了,已经强制把首页 redirect 到 https://www.bilibili.com/anime 很久了.
    CrazyRundong
        20
    CrazyRundong  
       2020-11-17 10:14:54 +08:00 via iPhone
    原来是多层图像叠加吗?我还以为是光场成像
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2838 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 06:57 · PVG 14:57 · LAX 22:57 · JFK 01:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.