跳至主要內容
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?

4563博客

全新的繁體中文 WordPress 網站
  • 首頁
  • 分享一个 B 站的 banner 视觉差的实现方法 github demo, 当然这个人还是个美美的女装大佬。
未分類
15 11 月 2020

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

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

資深大佬 : chloelam101 3

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

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

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

  • 資深大佬 : Clarke

    手机上看样式崩了

  • 主 資深大佬 : chloelam101

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

  • 資深大佬 : gesse

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

  • 資深大佬 : 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 可重多了吧?上面都有人觉得要分框架做了…..

  • 主 資深大佬 : 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, 可能业务要求的细节不一,但总体也是这两到三种思路。

文章導覽

上一篇文章
下一篇文章

AD

其他操作

  • 登入
  • 訂閱網站內容的資訊提供
  • 訂閱留言的資訊提供
  • WordPress.org 台灣繁體中文

51la

4563博客

全新的繁體中文 WordPress 網站
返回頂端
本站採用 WordPress 建置 | 佈景主題採用 GretaThemes 所設計的 Memory
4563博客
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?
在這裡新增小工具