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

[chloelam101]

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

还原 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

[chloelam101]

@codermagefox 用 react 只是为了快做 demo, 原生写 class webpack 出一个 js, 用 new class 也是一样原理阿,上面的 小哥哥只项目已经是 vue, 如用 vue 写了，他就方便植入，不用再写。我用 angular 出一个 demo 也是一样而已。

[redbuck]

@SmallTeddy 这个又不难.F12 看下样式就差不多明白原理了,剩下只是编码而已.

[yaphets666]

@SmallTeddy 前端的竞争也就局限在这了 所以我准备转后端了

[shenqi]

大佬，想知道别人知道你是汉子的时候，大家的反应是啥。

包括你我他

[ShuangChenyue]

浙江省公安温馨提醒：
您访问的 chloe-lam.github.io/bilibili-parallax-fall

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

访问不了

[ShuangChenyue]

手动改为 https 就好了

[nijjba]

@SmallTeddy 我之前用 Vue3 + Canvas 也写了一个 https://github.com/liuycy/bilibili-autumn

[SmallTeddy]

@nijjba OK 我去看一看 这咋 现在都用 vue3 开发了 大神不愧是大神

[chloelam101]

@shenqi 没有啥，就平常对待呗，我还是个已婚人士，老婆都不介意。😊

[chloelam101]

@nijjba 666, 不错，不错，我感觉你这个也不错，我也有这样想过 canvas，因为 b 站在 2k, 4k 还是 height 155px,你这个等比 resize, 可能业务要求的细节不一，但总体也是这两到三种思路。