前端绘图渣渣,想问一下各位大佬,这类效果一般用什么实现的哇?从那里入手学习哇?
1
yvettemuki OP |
2
Valid 2019-12-19 00:19:58 +08:00
前端 vue,看了一下一直在下 mp4,估计全是视频
|
3
OHyn 2019-12-19 00:27:02 +08:00
背景是用 canvas 画的。很有趣!
|
4
galikeoy 2019-12-19 09:41:39 +08:00
webgl
|
5
a62527776a 2019-12-19 10:01:28 +08:00
canvas 啊 666
|
6
zhuoyan 2019-12-19 10:09:26 +08:00
好强啊
|
7
tearain 2019-12-19 10:16:28 +08:00
虽然内容无感,但确实好看
|
8
moonheart 2019-12-19 10:17:41 +08:00 1
控制台消息疯了
|
9
zlccn 2019-12-19 11:05:27 +08:00 11
是我眼睛不太合群吗?炫酷在哪里?
|
10
aLazarus 2019-12-19 11:21:54 +08:00
要不看下 apple 官网
|
11
cuzfinal 2019-12-19 11:42:03 +08:00
PixiJS,这是一个前端的游戏引擎啊,之前 GitHub 还有个用 PixiJS 做游戏的活动。
|
12
yvettemuki OP @aLazarus 哇确实很可以,感觉类似的实现原理
|
13
yvettemuki OP @zlccn 大佬,就是一直往下拉背景的效果的变化啊
|
14
yvettemuki OP @Valid 下载视频可以呈现这种过渡很难吧?
|
15
yvettemuki OP @galikeoy 哇 我去看看
|
16
yvettemuki OP @cuzfinal 可以,我看看哈,感谢
|
17
lzuntalented 2019-12-19 14:00:47 +08:00
首屏进去,卡卡西
|
18
feng04998 2019-12-19 14:07:32 +08:00
电脑太差的还没法玩它,加载卡的一匹
|
19
sumarker 2019-12-19 14:10:18 +08:00 1
小水管带宽终结者
|
20
shunia 2019-12-19 14:15:18 +08:00
逻辑上来说是三层:
0:pixi.js 用 canvas 画出来的全屏背景动画 1:纯网页页面内容(可滚动) 2:纯网页底部固定条(不滚动) pixi.js 很容易就从 console 里分辨出来 |
21
alphardex 2019-12-19 14:41:59 +08:00
比国内大多数网站好多了,但离炫还是有一点距离
https://yui540.graphics 个人认为这样的网站才是真的炫 不过懂得用 webgl 以及相关的动画库,已经算是一个很大的进步了呢 |
22
misaka19000 2019-12-19 14:47:02 +08:00
@alphardex #21 +1
|
23
BIAOXYZ 2019-12-19 15:00:15 +08:00 1
https://bruno-simon.com 开车站。来不及解释了,快上车。
|
25
dinjufen 2019-12-19 15:09:11 +08:00
我浏览器右上角的 vue 工具亮了,应该是 vue 写的吧
|
26
yeah2109 2019-12-19 15:12:27 +08:00
楼上的感觉好像没见过 canvas 一样,现在用 canvas 做网页也不是什么新鲜事了吧
|
28
lemon6 2019-12-19 15:32:41 +08:00
我觉得做的挺好了,说一般的不知道再酸什么。
|
29
Cyshall 2019-12-19 15:35:38 +08:00
这也叫酷炫?建议看看 https://bruno-simon.com/这位老哥的各种作品。
|
30
Cyshall 2019-12-19 15:38:41 +08:00 3
为了方便观看,我这边直接贴上来。
https://prior.co.jp/discover/en/authenticity https://www.orano.group/experience/innovation/en https://thenewmobileworkforce.imm-g-prod.com/ http://gleec.imm-g-prod.com/ https://www.refletcommunication.com/ |
31
Hoshinokozo 2019-12-19 15:59:23 +08:00
Canvas 实现的,对于普通业务前端来说确实很炫,因为大部分前端日常业务用不到,不过比这厉害的多了去了,建议看看 three.js 的官方示例,WebGL 还只是 OpenGL 的一小部分,你让一个搞 unity 的来写的话,估计能玩出花儿来。
|
32
learnshare 2019-12-19 16:02:24 +08:00
AE 导出为视频 /An 导出为动画 更方便一些,纯手写这些效果比较麻烦了
|
35
himesens 2019-12-19 16:30:43 +08:00
pixi 都可以直接做游戏的
|
36
coolooks 2019-12-19 16:31:03 +08:00
虽然 B 站不算最酷炫的,但绝对比楼上在座的各位强,毕竟键盘打字也不难
|
38
Godikov 2019-12-19 16:40:25 +08:00
卡的雅痞
|
39
hyy1995 2019-12-19 16:40:35 +08:00
v 站就是有一堆键盘敲得贼响的人,不管你发什么,都会有人挑刺。我觉得 b 站这网页做的真的很棒
|
40
iMusic 2019-12-19 16:41:28 +08:00
|
41
NonClockworkChen 2019-12-19 16:45:44 +08:00
@hyy1995 也不能这么说,你是没接触过,对效果很高用户的需求,一般只能找做游戏的人写
|
42
vissssa 2019-12-19 16:49:52 +08:00
之前看到三星手机的一个网页 滚动着从小到宇宙再到手机貌似
叹为观止 |
43
fhvch 2019-12-19 16:53:56 +08:00
明星阵容有点东西啊,五月天,邓紫棋
|
44
qing18 2019-12-19 16:56:45 +08:00
有点卡呀
|
45
areless 2019-12-19 17:02:23 +08:00 via Android
哎~当年做 flash 的真可悲。明明做着比现在这种炫酷一百倍的东西,最后都默默离开了这个领域。真想把现在赞美 webgl canvas 的人通过时光机送到 10 年前,让他们天天浏览那些 flash 模板素材站,到吐为止
|
46
xxx749 2019-12-19 17:21:37 +08:00
抽不了奖鸭
|
47
yvettemuki OP @shunia 可
|
48
emmmlucky 2019-12-19 17:46:25 +08:00
随手在 threejs 官网找了个,https://2050.earth/
|
49
janxin 2019-12-19 17:47:00 +08:00
少年你应该看看苹果的官网
|
50
VishvaWang 2019-12-19 19:06:29 +08:00
加载也太慢了,好歹先加载一部分展示出来,剩下的后台慢慢加载啊
|
51
ArJun 2019-12-19 19:07:59 +08:00
golang 写的后台就是快··
|
52
IGJacklove 2019-12-19 23:12:23 +08:00
@zlccn 可能你不是开发的原因把。。我会写一点前端,感觉做的很棒,技术层面
|
53
dokodream 2019-12-20 10:02:52 +08:00
推荐 Iphone 官网和 coloros 官网。。。。
|
54
dokodream 2019-12-20 10:03:32 +08:00
|
55
nicoljiang 2019-12-20 11:17:18 +08:00
感觉好一般啊...太一般了。
|
56
no1guangming 2019-12-20 12:11:42 +08:00
难道没有人提 bug 吗
点击发动态参与抽奖, 要同意 bilibili 用户条款, 底部的图片把“同意”选项遮住惹.... |
57
no1guangming 2019-12-20 12:22:06 +08:00
|
58
oahebky 2019-12-20 16:08:02 +08:00
电脑不差:32G 内存,6 核无睿频 3.0GHz,“亮屏级”独显,台式机。
Ubuntu 系统 + Chrome 打开 -- 卡爆了。 |