1
xlsama 2023-05-23 10:26:19 +08:00
transform: translate3d;
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d |
2
yawhale 2023-05-23 10:27:58 +08:00
坐蹲
国内网站应该不会这么弄吧,鼠标往下滑就看见底导航( Mac 电脑),设计有点大胆 |
3
qingnichimi 2023-05-23 10:29:20 +08:00
蹲
|
4
Crawping 2023-05-23 10:32:58 +08:00
文本当作纹理图绑定到 3D Box 上 然后随着滚动移动纹理在顶点上的相对偏移
|
5
weijancc 2023-05-23 10:36:00 +08:00
很酷
|
6
liyang5945 2023-05-23 10:38:13 +08:00
css3 做的 底部顶部用了 Z 轴
|
7
tiedan 2023-05-23 10:39:23 +08:00 3
说实话看着有一点点头晕的感觉
|
8
molvqingtai 2023-05-23 10:39:58 +08:00
滚动用的这个库 https://github.com/studio-freight/lenis ,3D 动画可能是手写的
|
9
iMiata 2023-05-23 10:44:10 +08:00
看成 “有情趣” 了,我有罪...
|
10
paranoia 2023-05-23 10:52:52 +08:00 1
星,星球大战?
|
11
jerfoxu 2023-05-23 11:20:51 +08:00
是挺酷的呢
|
12
hanlin85 2023-05-23 11:24:30 +08:00
我也觉得有点晕
|
13
cyrbuzz 2023-05-23 11:31:12 +08:00
3D 用 perspective+transform 3D 来控制。
然后同样的 DOM 渲染三遍,中间是正常内容,上下分别是正常内容之外的一定 px 的内容,滚动和初始化的时候计算一下 scrollTop 和 height 完事。 |
14
LavaC 2023-05-23 11:32:40 +08:00 1
只说原理倒是简单:他准备了三套内容,一套正常,其余两套改成不同的透视视角,接着对接一下滚动位置就完成个大概了。
|
15
zhenghuiy 2023-05-23 11:51:39 +08:00
虽然我也喜欢酷的东西,但稍微滚动一下就很晕。。在做到新奇的同时无法保证浏览体验
|
16
paopjian 2023-05-23 12:07:02 +08:00
感觉是做了个类似于轮播图的东西,上下两块做 3d 透视处理,正面就是正常的内容, b 站好多人有这个教程
|
17
Macv1994 2023-05-23 12:15:00 +08:00
有点像星球大战的片尾?
|
18
QKgf555H87Fp0cth 2023-05-23 12:22:03 +08:00
头晕了
|
19
byp 2023-05-23 12:23:59 +08:00
data:image/png;base64,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
|
20
byp 2023-05-23 12:25:20 +08:00
file:///Users/baiyapeng/Library/Containers/com.bytedance.macos.feishu/Data/Library/Application%20Support/LarkShell/OptimizeImage/6f98f796-ca92-46fa-b83c-f55c8768c7c6.jpeg
|
21
aidchow 2023-05-23 14:51:58 +08:00 via iPhone
啊…刷快了晕的不行🤮
|
22
iyiluo 2023-05-23 14:56:20 +08:00
动画不太流畅,刷起来晃眼
|
23
zhoupeng199 2023-05-23 15:16:36 +08:00
我猜是把一个页面 copy 成三分分别放在上中下,然后上下做变形,再监听滚动
|
24
zhoupeng199 2023-05-23 15:18:16 +08:00
看了下节点,果然没猜错
|
25
retrocode 2023-05-23 15:54:08 +08:00 4
我简单写了个 demo
[https://code.juejin.cn/pen/7236203138389114938]( https://code.juejin.cn/pen/7236203138389114938) 主要起作用的是 transform-style: preserve-3d; perspective: 100px; 和子元素的 transform 后续就是绑定滚动条实时修改 transform: translate3d(0px, 10px, 0px); 的值, 就可以实现这个效果了. |
26
wudi77 2023-05-23 15:55:01 +08:00
快吐了
|
27
hahiru 2023-05-23 16:46:48 +08:00
看得我难受。
|
28
szkoda 2023-05-23 16:56:15 +08:00
划得头晕+1
|
29
xiaojun1994 2023-05-23 18:27:21 +08:00
屮,要吐了,看着是通过 transform 实现的
|
30
xinshoushanglu 2023-05-23 19:35:14 +08:00
有点晕
|