发现一个有趣的网站,有人知道这种效果怎么实现吗 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
Tsuj100
V2EX    程序员

发现一个有趣的网站,有人知道这种效果怎么实现吗

  •  
  •   Tsuj100 2023-05-23 10:18:2 +08:00 7141 次点击
    这是一个创建于 872 天前的主题,其中的信息可能已经有所发展或是发生改变。
    30 条回复    2023-05-23 19:35:14 +08:00
    xlsama
        1
    xlsama  
       2023-05-23 10:26:19 +08:00
    yawhale
        2
    yawhale  
       2023-05-23 10:27:58 +08:00
    坐蹲
    国内网站应该不会这么弄吧,鼠标往下滑就看见底导航( Mac 电脑),设计有点大胆
    qingnichimi
        3
    qingnichimi  
       2023-05-23 10:29:20 +08:00
    Crawping
        4
    Crawping  
       2023-05-23 10:32:58 +08:00
    文本当作纹理图绑定到 3D Box 上 然后随着滚动移动纹理在顶点上的相对偏移
    weijancc
        5
    weijancc  
       2023-05-23 10:36:00 +08:00
    很酷
    liyang5945
        6
    liyang5945  
       2023-05-23 10:38:13 +08:00
    css3 做的 底部顶部用了 Z 轴
    tiedan
        7
    tiedan  
       2023-05-23 10:39:23 +08:00   3
    说实话看着有一点点头晕的感觉
    molvqingtai
        8
    molvqingtai  
       2023-05-23 10:39:58 +08:00
    滚动用的这个库 https://github.com/studio-freight/lenis ,3D 动画可能是手写的
    iMiata
        9
    iMiata  
       2023-05-23 10:44:10 +08:00
    看成 “有情趣” 了,我有罪...
    paranoia
        10
    paranoia  
       2023-05-23 10:52:52 +08:00   1
    星,星球大战?
    jerfoxu
        11
    jerfoxu  
       2023-05-23 11:20:51 +08:00
    是挺酷的呢
    hanlin85
        12
    hanlin85  
       2023-05-23 11:24:30 +08:00
    我也觉得有点晕
    cyrbuzz
        13
    cyrbuzz  
       2023-05-23 11:31:12 +08:00
    3D 用 perspective+transform 3D 来控制。

    然后同样的 DOM 渲染三遍,中间是正常内容,上下分别是正常内容之外的一定 px 的内容,滚动和初始化的时候计算一下 scrollTop 和 height 完事。
    LavaC
        14
    LavaC  
       2023-05-23 11:32:40 +08:00   1
    只说原理倒是简单:他准备了三套内容,一套正常,其余两套改成不同的透视视角,接着对接一下滚动位置就完成个大概了。
    zhenghuiy
        15
    zhenghuiy  
       2023-05-23 11:51:39 +08:00
    虽然我也喜欢酷的东西,但稍微滚动一下就很晕。。在做到新奇的同时无法保证浏览体验
    paopjian
        16
    paopjian  
       2023-05-23 12:07:02 +08:00
    感觉是做了个类似于轮播图的东西,上下两块做 3d 透视处理,正面就是正常的内容, b 站好多人有这个教程
    Macv1994
        17
    Macv1994  
       2023-05-23 12:15:00 +08:00
    有点像星球大战的片尾?
    QKgf555H87Fp0cth
        18
    QKgf555H87Fp0cth  
       2023-05-23 12:22:03 +08:00
    头晕了
    byp
        19
    byp  
       2023-05-23 12:23:59 +08:00
    data:image/png;base64,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
    byp
        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
    aidchow
        21
    aidchow  
       2023-05-23 14:51:58 +08:00 via iPhone
    啊…刷快了晕的不行
    iyiluo
        22
    iyiluo  
       2023-05-23 14:56:20 +08:00
    动画不太流畅,刷起来晃眼
    zhoupeng199
        23
    zhoupeng199  
       2023-05-23 15:16:36 +08:00
    我猜是把一个页面 copy 成三分分别放在上中下,然后上下做变形,再监听滚动
    zhoupeng199
        24
    zhoupeng199  
       2023-05-23 15:18:16 +08:00
    看了下节点,果然没猜错
    cvooc
        25
    cvooc  
       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); 的值, 就可以实现这个效果了.
    wudi77
        26
    wudi77  
       2023-05-23 15:55:01 +08:00
    快吐了
    hahiru
        27
    hahiru  
       2023-05-23 16:46:48 +08:00
    看得我难受。
    szkoda
        28
    szkoda  
       2023-05-23 16:56:15 +08:00
    划得头晕+1
    xiaojun1994
        29
    xiaojun1994  
       2023-05-23 18:27:21 +08:00
    屮,要吐了,看着是通过 transform 实现的
    xinshoushanglu
        30
    xinshoushanglu  
       2023-05-23 19:35:14 +08:00
    有点晕
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2274 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 26ms UTC 00:22 PVG 08:22 LAX 17:22 JFK 20:22
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86