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

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

  •  
  •   Tsuj100 · 355 天前 · 6205 次点击
    这是一个创建于 355 天前的主题,其中的信息可能已经有所发展或是发生改变。

    腾讯云最新优惠活动来了:云产品限时1折,云服务器低至88元/年 ,点击这里立即抢购:9i0i.cn/qcloud,更有2860元代金券免费领取,付款直接抵现金用,点击这里立即领取:9i0i.cn/qcloudquan

    (福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

    30 条回复  ?  2023-05-23 19:35:14 +08:00
    yawhale
        2
    yawhale  
       355 天前
    坐蹲
    国内网站应该不会这么弄吧,鼠标往下滑就看见底导航( Mac 电脑),设计有点大胆
    qingnichimi
        3
    qingnichimi  
       355 天前
    Crawping
        4
    Crawping  
       355 天前
    文本当作纹理图绑定到 3D Box 上 然后随着滚动移动纹理在顶点上的相对偏移
    weijancc
        5
    weijancc  
       355 天前
    很酷
    liyang5945
        6
    liyang5945  
       355 天前
    css3 做的 底部顶部用了 Z 轴
    tiedan
        7
    tiedan  
       355 天前   ?? 3
    说实话看着有一点点头晕的感觉
    molvqingtai
        8
    molvqingtai  
       355 天前
    滚动用的这个库 https://github.com/studio-freight/lenis ,3D 动画可能是手写的
    iMiata
        9
    iMiata  
       355 天前
    看成 “有情趣” 了,我有罪...
    paranoia
        10
    paranoia  
       355 天前   ?? 1
    星,星球大战?
    jerfoxu
        11
    jerfoxu  
       355 天前
    是挺酷的呢
    hanlin85
        12
    hanlin85  
       355 天前
    我也觉得有点晕
    cyrbuzz
        13
    cyrbuzz  
       355 天前
    3D 用 perspective+transform 3D 来控制。

    然后同样的 DOM 渲染三遍,中间是正常内容,上下分别是正常内容之外的一定 px 的内容,滚动和初始化的时候计算一下 scrollTop 和 height 完事。
    LavaC
        14
    LavaC  
       355 天前   ?? 1
    只说原理倒是简单:他准备了三套内容,一套正常,其余两套改成不同的透视视角,接着对接一下滚动位置就完成个大概了。
    zhenghuiy
        15
    zhenghuiy  
       355 天前
    虽然我也喜欢酷的东西,但稍微滚动一下就很晕。。在做到新奇的同时无法保证浏览体验
    paopjian
        16
    paopjian  
       355 天前
    感觉是做了个类似于轮播图的东西,上下两块做 3d 透视处理,正面就是正常的内容, b 站好多人有这个教程
    Macv1994
        17
    Macv1994  
       355 天前
    有点像星球大战的片尾?
    likunyan
        18
    likunyan  
       355 天前
    头晕了
    byp
        19
    byp  
       355 天前
    data:image/png;base64,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
    byp
        20
    byp  
       355 天前
    file:///Users/baiyapeng/Library/Containers/com.bytedance.macos.feishu/Data/Library/Application%20Support/LarkShell/OptimizeImage/6f98f796-ca92-46fa-b83c-f55c8768c7c6.jpeg
    aidchow
        21
    aidchow  
       355 天前 via iPhone
    啊…刷快了晕的不行?
    iyiluo
        22
    iyiluo  
       355 天前
    动画不太流畅,刷起来晃眼
    zhoupeng199
        23
    zhoupeng199  
       355 天前
    我猜是把一个页面 copy 成三分分别放在上中下,然后上下做变形,再监听滚动
    zhoupeng199
        24
    zhoupeng199  
       355 天前
    看了下节点,果然没猜错
    retrocode
        25
    retrocode  
       355 天前   ?? 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  
       355 天前
    快吐了
    hahiru
        27
    hahiru  
       355 天前
    看得我难受。
    szkoda
        28
    szkoda  
       355 天前
    划得头晕+1
    xiaojun1994
        29
    xiaojun1994  
       355 天前
    屮,要吐了,看着是通过 transform 实现的
    xinshoushanglu
        30
    xinshoushanglu  
       355 天前
    有点晕
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2878 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 12:02 · PVG 20:02 · LAX 05:02 · JFK 08:02
    Developed with CodeLauncher
    ? Do have faith in what you're doing.


    http://www.vxiaotou.com