哔哩哔哩- 视觉差 秋 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
This topic created in 2177 days ago, the information mentioned may be changed or developed.
 |
ClarkeNov 16, 2020 via Android
1
手机上看样式崩了
|
 |
2
@Clarke PC 为主，B 站这个也是
|
 |
3
 |
1 |
SmallTeddyNov 16, 2020
4
这个可以 视差滚动在前端算是最好看的一种样式展示了 苹果、华为的产品详情页也都是用时差滚动做的 我刚看了一下 这个是 react 框架写的 可不可以用 vue 写一版？
|
|
5
@SmallTeddy 哈哈，vue3 也是相同 useRef，相同做，如果有 vue2， 在的 mounted 使用 window addEventLister 就可以，道理相关，ref 那块就用回 vue 2 的 ref 就可以，ref 在 mounted 后拿同对应 ObjectELement 去做就好。
|
 |
sansansan333Nov 16, 2020
6
|
|
sansansan333Nov 16, 2020
7
|
|
8
@sansansan333 这个是简单实现版本，道理一样,都是 pow/ abs 与 clientX/ witdth 差比，简单有两个无考虑，B 站的是考虑，1. 每张的比例是不一同，可配置调整 ，2.是支持 1280px-4K 屏的范围， 到 2k 后你就发现简单版不满足的。
|
 |
MzM2ODkxNov 16, 2020
9
@sansansan333 简介明了
|
|
MzM2ODkxNov 16, 2020
10
@chloelam101 女装大佬就是你吧
|
|
11
@iMusic 嘻嘻
|
 |
virgil1988Nov 16, 2020 via iPhone
12
谁要看实现，我要看女装大佬
|
 |
hoyixiNov 16, 2020
13
这种 banner 国外的 羞羞 视频网站 N 年前就有了，有兴趣可以去看看咋实现的。
视频网站，无论是交互还是技术，国外的 羞羞 视频网站都走在最前面，YouTube 之类都要靠边站。 |
 |
codermagefoxNov 16, 2020
14
楼主是不知道 Parallax.js 吗.....
这种东西库一抓一大把，有必要自己重做一个么... |
|
SmallTeddyNov 16, 2020
15
@sansansan333 你这个小人都不能眨眼睛
|
|
SmallTeddyNov 16, 2020
16
@codermagefox 永远都是依托别人的库 自己不开发 所以一直都落后与别人
|
|
17
@codermagefox 是的阿, Parallax 类很早做，animejs 更有，想玩更高级 GSAP 多年就 tweetmax，physical 2D, 想玩 3D，threejs 也有很建模的东西，玩 maya 等，问题的点，简单有简单做，库有库做，业务点不一样，玩 egret, unity2d 都很重，有时候前端实现一些简单有趣东西就简单处理。
|
 |
zzx0403Nov 16, 2020
18
这个🉑️
|
|
codermagefoxNov 16, 2020
19
@SmallTeddy emm...首先，这玩意我自己做过，很简单。
然后，我觉得在需求确定，有现成库的情况下，自己做一个，很没有意义。有这点时间学学东西不好吗？ |
|
codermagefoxNov 16, 2020
20
@chloelam101 你这个都上 React 了....比 Parallax.js 可重多了吧？上面都有人觉得要分框架做了.....
|
|
21
@codermagefox 用 react 只是为了快做 demo, 原生写 class webpack 出一个 js, 用 new class 也是一样原理阿,上面的 小哥哥只项目已经是 vue, 如用 vue 写了，他就方便植入，不用再写。我用 angular 出一个 demo 也是一样而已。
|
 |
redbuckNov 16, 2020
22
@SmallTeddy 这个又不难.F12 看下样式就差不多明白原理了,剩下只是编码而已.
|
 |
yaphets666Nov 16, 2020
23
@SmallTeddy 前端的竞争也就局限在这了 所以我准备转后端了
|
 |
shenqiNov 16, 2020
24
大佬，想知道别人知道你是汉子的时候，大家的反应是啥。
包括你我他 |
 |
ShuangChenyueNov 16, 2020
25
|
|
ShuangChenyueNov 16, 2020
26
手动改为 https 就好了
|
 |
27
@SmallTeddy 我之前用 Vue3 + Canvas 也写了一个 https://github.com/liuycy/bilibili-autumn
|
|
SmallTeddyNov 16, 2020
28
@nijjba OK 我去看一看 这咋 现在都用 vue3 开发了 大神不愧是大神
|
|
29
@shenqi 没有啥，就平常对待呗，我还是个已婚人士，老婆都不介意。😊
|
|
30
@nijjba 666, 不错，不错，我感觉你这个也不错，我也有这样想过 canvas，因为 b 站在 2k, 4k 还是 height 155px,你这个等比 resize, 可能业务要求的细节不一，但总体也是这两到三种思路。
|
Select Language