V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
sumtsui
V2EX  ›  前端开发

有人知道这个前端效果怎么实现的吗

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

    接了个活, 客户想要实现这个网站 https://www.superlist.com/, 第一屏左右移动那根竖线, 能切换背景图的效果. 知道有什么库可以实现吗?

    12 条回复    2023-10-01 12:42:27 +08:00
    gujuji
        1
    gujuji  
       210 天前 via iPhone
    f12 不就看到了吗?
    b821025551b
        2
    b821025551b  
       210 天前
    这不就是两个 div 同速滚动么。。。
    sumtsui
        3
    sumtsui  
    OP
       210 天前
    @gujuji 说是这么说的
    sumtsui
        4
    sumtsui  
    OP
       210 天前
    @b821025551b 主要是想知道那个根据那根竖线变换背景的效果
    cyrbuzz
        5
    cyrbuzz  
       210 天前
    直接用 transition 就可以。
    sumtsui
        6
    sumtsui  
    OP
       210 天前
    看出来了, 就是一个 div 在下一层 100% width, 一个 div 在上一层, width 根据 mouse X 变化而变化.
    还发给几个做前端开发的朋友看了, 说可能是 css filter 或者 mixed-mode 实现的, 听到了从来没听过的 css 时髦属性, 不错不错.
    qazwsxkevin
        7
    qazwsxkevin  
       210 天前
    加载页面完毕后,随手鼠标划拉了一下看效果,直接把我 CPU 风扇从静态干到暴力模式,然后几十秒后再停下来了。。。CPU 是 I7-13800H ,确定只加载这个页面,PC 其它什么 load 负载的程序都没有,
    Track13
        8
    Track13  
       210 天前 via Android
    我这游戏本风扇都明显加速了。。
    Track13
        9
    Track13  
       210 天前 via Android
    2 楼正确答案。
    rabbbit
        10
    rabbbit  
       210 天前   ❤️ 1
    就是两个 div ,左边的盖在右边的上面。
    filter 已经算老古董了,介绍几个新的,以后可能会经常用的。

    dvh
    dvw
    keyboard-inset-height
    keyboard-inset-width
    ::view-transition-new
    ::view-transition-old
    :popover-open
    subgrid
    @layer
    @scroll-timeline
    has()
    anchor()
    taotaodaddy
        11
    taotaodaddy  
       210 天前
    CPU 占用率干到 80%多...
    lxiian
        12
    lxiian  
       209 天前
    什么鬼东西,ios 浏览器打开直接死循环播放无数个视频,看不到任何网页,全是视频播放器。。关掉一个又出来一个,根本见不到底。。。手机也立马高温发热了。。。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1652 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 16:39 · PVG 00:39 · LAX 09:39 · JFK 12:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.