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