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

分享一个 B 站的 banner 视觉差的实现方法 github demo, 当然这个人还是个美美的女装大佬。

  •  1
     
  •   chloelam101 · 2020-11-16 10:01:58 +08:00 · 4174 次点击
    这是一个创建于 1450 天前的主题,其中的信息可能已经有所发展或是发生改变。

    哔哩哔哩- 视觉差 秋 banner (bilibili-parallax-fall)

    avatar

    还原 B 站真实效果的视觉差效果

    大体实现原理分三个模块

    1. 实现小女孩持续性眨眼

    2. window resize ,初始化比例 及 breakpoint

    3. 在 mouseEvent 下 视觉差 配置 translate x y 比例不同 及 blur

    github

    https://github.com/chloe-lam/bilibili-parallax-fall

    在线 demo

    http://chloe-lam.github.io/bilibili-parallax-fall

    30 条回复    2020-11-16 17:55:04 +08:00
    Clarke
        1
    Clarke  
       2020-11-16 10:13:57 +08:00 via Android
    手机上看样式崩了
    chloelam101
        2
    chloelam101  
    OP
       2020-11-16 10:16:22 +08:00
    @Clarke PC 为主,B 站这个也是
    gesse
        3
    gesse  
       2020-11-16 10:31:03 +08:00   ❤️ 1
    SmallTeddy
        4
    SmallTeddy  
       2020-11-16 11:22:27 +08:00
    这个可以 视差滚动在前端算是最好看的一种样式展示了 苹果、华为的产品详情页也都是用时差滚动做的 我刚看了一下 这个是 react 框架写的 可不可以用 vue 写一版?
    chloelam101
        5
    chloelam101  
    OP
       2020-11-16 11:33:12 +08:00
    @SmallTeddy 哈哈,vue3 也是相同 useRef,相同做,如果有 vue2, 在的 mounted 使用 window addEventLister 就可以,道理相关,ref 那块就用回 vue 2 的 ref 就可以,ref 在 mounted 后拿同对应 ObjectELement 去做就好。
    sansansan333
        7
    sansansan333  
       2020-11-16 11:43:56 +08:00
    @sansansan333

    https://codepen.io/stevenlei/pen/MWeLEyx

    懒了下...看的好难受,重贴个
    chloelam101
        8
    chloelam101  
    OP
       2020-11-16 11:51:40 +08:00
    @sansansan333 这个是简单实现版本,道理一样,都是 pow/ abs 与 clientX/ witdth 差比,简单有两个无考虑,B 站的是考虑,1. 每张的比例是不一同,可配置调整 ,2.是支持 1280px-4K 屏的范围, 到 2k 后你就发现简单版不满足的。
    iMusic
        9
    iMusic  
       2020-11-16 11:58:30 +08:00
    @sansansan333 简介明了
    iMusic
        10
    iMusic  
       2020-11-16 11:58:52 +08:00
    @chloelam101 女装大佬就是你吧
    chloelam101
        11
    chloelam101  
    OP
       2020-11-16 11:59:33 +08:00
    @iMusic 嘻嘻
    virgil1988
        12
    virgil1988  
       2020-11-16 13:04:10 +08:00 via iPhone
    谁要看实现,我要看女装大佬
    hoyixi
        13
    hoyixi  
       2020-11-16 13:06:31 +08:00
    这种 banner 国外的 羞羞 视频网站 N 年前就有了,有兴趣可以去看看咋实现的。
    视频网站,无论是交互还是技术,国外的 羞羞 视频网站都走在最前面,YouTube 之类都要靠边站。
    codermagefox
        14
    codermagefox  
       2020-11-16 13:33:42 +08:00
    楼主是不知道 Parallax.js 吗.....
    这种东西库一抓一大把,有必要自己重做一个么...
    SmallTeddy
        15
    SmallTeddy  
       2020-11-16 13:40:48 +08:00
    @sansansan333 你这个小人都不能眨眼睛
    SmallTeddy
        16
    SmallTeddy  
       2020-11-16 13:42:11 +08:00
    @codermagefox 永远都是依托别人的库 自己不开发 所以一直都落后与别人
    chloelam101
        17
    chloelam101  
    OP
       2020-11-16 13:50:11 +08:00
    @codermagefox 是的阿, Parallax 类很早做,animejs 更有,想玩更高级 GSAP 多年就 tweetmax,physical 2D, 想玩 3D,threejs 也有很建模的东西,玩 maya 等,问题的点,简单有简单做,库有库做,业务点不一样,玩 egret, unity2d 都很重,有时候前端实现一些简单有趣东西就简单处理。
    zzx0403
        18
    zzx0403  
       2020-11-16 14:19:56 +08:00
    这个🉑️
    codermagefox
        19
    codermagefox  
       2020-11-16 15:12:05 +08:00
    @SmallTeddy emm...首先,这玩意我自己做过,很简单。
    然后,我觉得在需求确定,有现成库的情况下,自己做一个,很没有意义。有这点时间学学东西不好吗?
    codermagefox
        20
    codermagefox  
       2020-11-16 15:13:48 +08:00
    @chloelam101 你这个都上 React 了....比 Parallax.js 可重多了吧?上面都有人觉得要分框架做了.....
    chloelam101
        21
    chloelam101  
    OP
       2020-11-16 15:40:28 +08:00
    @codermagefox 用 react 只是为了快做 demo, 原生写 class webpack 出一个 js, 用 new class 也是一样原理阿,上面的 小哥哥只项目已经是 vue, 如用 vue 写了,他就方便植入,不用再写。我用 angular 出一个 demo 也是一样而已。
    redbuck
        22
    redbuck  
       2020-11-16 16:07:40 +08:00
    @SmallTeddy 这个又不难.F12 看下样式就差不多明白原理了,剩下只是编码而已.
    yaphets666
        23
    yaphets666  
       2020-11-16 16:13:54 +08:00
    @SmallTeddy 前端的竞争也就局限在这了 所以我准备转后端了
    shenqi
        24
    shenqi  
       2020-11-16 16:54:31 +08:00
    大佬,想知道别人知道你是汉子的时候,大家的反应是啥。

    包括你我他
    ShuangChenyue
        25
    ShuangChenyue  
       2020-11-16 17:02:49 +08:00
    浙江省公安温馨提醒:
    您访问的 chloe-lam.github.io/bilibili-parallax-fall

    该网站被大量用户举报,含有未经证实的信息,可能造成您的损失,建议谨慎访问!

    访问不了
    ShuangChenyue
        26
    ShuangChenyue  
       2020-11-16 17:05:39 +08:00
    手动改为 https 就好了
    nijjba
        27
    nijjba  
       2020-11-16 17:23:00 +08:00   ❤️ 1
    @SmallTeddy 我之前用 Vue3 + Canvas 也写了一个 https://github.com/liuycy/bilibili-autumn
    SmallTeddy
        28
    SmallTeddy  
       2020-11-16 17:46:44 +08:00
    @nijjba OK 我去看一看 这咋 现在都用 vue3 开发了 大神不愧是大神
    chloelam101
        29
    chloelam101  
    OP
       2020-11-16 17:48:55 +08:00
    @shenqi 没有啥,就平常对待呗,我还是个已婚人士,老婆都不介意。😊
    chloelam101
        30
    chloelam101  
    OP
       2020-11-16 17:55:04 +08:00
    @nijjba 666, 不错,不错,我感觉你这个也不错,我也有这样想过 canvas,因为 b 站在 2k, 4k 还是 height 155px,你这个等比 resize, 可能业务要求的细节不一,但总体也是这两到三种思路。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2705 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 15:24 · PVG 23:24 · LAX 07:24 · JFK 10:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.