V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Tsuj100
V2EX  ›  程序员

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

  •  
  •   Tsuj100 · 2023-05-23 10:18:12 +08:00 · 6535 次点击
    这是一个创建于 537 天前的主题,其中的信息可能已经有所发展或是发生改变。
    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
    有点像星球大战的片尾?
    likunyan
        18
    likunyan  
       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
    看了下节点,果然没猜错
    retrocode
        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); 的值, 就可以实现这个效果了.
    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   ·   实用小工具   ·   2603 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 02:50 · PVG 10:50 · LAX 18:50 · JFK 21:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.