分享一个 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

[Clarke]

手机上看样式崩了

[chloelam101]

@Clarke PC 为主，B 站这个也是

[gesse]

[SmallTeddy]

这个可以 视差滚动在前端算是最好看的一种样式展示了 苹果、华为的产品详情页也都是用时差滚动做的 我刚看了一下 这个是 react 框架写的 可不可以用 vue 写一版？

[chloelam101]

@SmallTeddy 哈哈，vue3 也是相同 useRef，相同做，如果有 vue2， 在的 mounted 使用 window addEventLister 就可以，道理相关，ref 那块就用回 vue 2 的 ref 就可以，ref 在 mounted 后拿同对应 ObjectELement 去做就好。

[sansansan333]

https://codepen.io/stevenlei/pen/MWeLEyx?__cf_chl_jschl_tk__=a601226fc4ea23e564773d7cca0fa7ceb18a483b-1605492930-0-Ad-3nKDc2E83Mqf1k5PC7DK8W63HYerFYPL6Bi6uRnOtJx4I5PsZJg6C6dT9SOGgxL0wX2WYQ9F_GBIFjug7dBUIM7e_3PDl4ex9glSbks1m6uyejoqqu2ariJTxwBUg4V8YZaDJcjbjfCauapNog6WksbVMOnBPZq37D_fnDXIPKVkw8qiie1kbu-KBEkRxhvXpzHCHBjGNrdNvylAZT8UdLBCM39283b9mRpv0LlMKywc5OozX9LmNj_mi41EqoQrlXA3XVQgdDtXLrPnOXCXWtiJz8gJRN_HfB1PI9za94ShJXoa0XfBwHXSCmQvw4Owslee64TUpWiZTXrRFNhg5GAKDeNvhNLTJGmao4V5a


代码在此

[sansansan333]

@sansansan333

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

懒了下...看的好难受，重贴个

[chloelam101]

@sansansan333 这个是简单实现版本，道理一样,都是 pow/ abs 与 clientX/ witdth 差比，简单有两个无考虑，B 站的是考虑，1. 每张的比例是不一同，可配置调整 ，2.是支持 1280px-4K 屏的范围， 到 2k 后你就发现简单版不满足的。

[iMusic]

@sansansan333 简介明了

[iMusic]

@chloelam101 女装大佬就是你吧

[chloelam101]

@iMusic 嘻嘻

[virgil1988]

谁要看实现，我要看女装大佬

[hoyixi]

这种 banner 国外的 羞羞 视频网站 N 年前就有了，有兴趣可以去看看咋实现的。
视频网站，无论是交互还是技术，国外的 羞羞 视频网站都走在最前面，YouTube 之类都要靠边站。

[codermagefox]

楼主是不知道 Parallax.js 吗.....
这种东西库一抓一大把，有必要自己重做一个么...

[SmallTeddy]

@sansansan333 你这个小人都不能眨眼睛

[SmallTeddy]

@codermagefox 永远都是依托别人的库 自己不开发 所以一直都落后与别人

[chloelam101]

@codermagefox 是的阿, Parallax 类很早做，animejs 更有，想玩更高级 GSAP 多年就 tweetmax，physical 2D, 想玩 3D，threejs 也有很建模的东西，玩 maya 等，问题的点，简单有简单做，库有库做，业务点不一样，玩 egret, unity2d 都很重，有时候前端实现一些简单有趣东西就简单处理。

[zzx0403]

这个🉑️

[codermagefox]

@SmallTeddy emm...首先，这玩意我自己做过，很简单。
然后，我觉得在需求确定，有现成库的情况下，自己做一个，很没有意义。有这点时间学学东西不好吗？

[codermagefox]

@chloelam101 你这个都上 React 了....比 Parallax.js 可重多了吧？上面都有人觉得要分框架做了.....