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

[sumtsui]

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

[gujuji]

f12 不就看到了吗？

[b821025551b]

这不就是两个 div 同速滚动么。。。

[sumtsui]

@gujuji 说是这么说的

[sumtsui]

@b821025551b 主要是想知道那个根据那根竖线变换背景的效果

[cyrbuzz]

直接用 transition 就可以。

[sumtsui]

看出来了, 就是一个 div 在下一层 100% width, 一个 div 在上一层, width 根据 mouse X 变化而变化.
还发给几个做前端开发的朋友看了, 说可能是 css filter 或者 mixed-mode 实现的, 听到了从来没听过的 css 时髦属性, 不错不错.

[qazwsxkevin]

加载页面完毕后，随手鼠标划拉了一下看效果，直接把我 CPU 风扇从静态干到暴力模式，然后几十秒后再停下来了。。。CPU 是 I7-13800H ，确定只加载这个页面，PC 其它什么 load 负载的程序都没有，

[Track13]

我这游戏本风扇都明显加速了。。

[Track13]

2 楼正确答案。

[rabbbit]

就是两个 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]

CPU 占用率干到 80%多...

[lxiian]

什么鬼东西，ios 浏览器打开直接死循环播放无数个视频，看不到任何网页，全是视频播放器。。关掉一个又出来一个，根本见不到底。。。手机也立马高温发热了。。。。