这是一款全屏图片无限循环滚动效果,基于 HTML+CSS 与 Lenis(平滑滚动 + 无限循环 + 整屏吸附)、GSAP ScrollTrigger 技术实现。三张满屏大图纵向排列,滚到底会无缝接回第一张,怎么翻都翻不到尽头;每次停手都会自动吸附对齐到整屏,图片本身则跟着滚动做反向位移的视差,画面像在纵深里缓慢推移。
技术细节:无缝的关键其实是个很朴素的做法——把第一屏在末尾复制一份当"接缝",加上 aria-hidden 不让读屏软件重复念,配合 Lenis 的 infinite 模式,用户完全察觉不到跳回。真正讲究的是 GSAP 的 scrollerProxy 桥接:滚动被 Lenis 接管后,ScrollTrigger 得靠它才能拿到正确进度,否则视差会直接失效,这是自己动手时最容易踩的坑。另外整站隐藏了滚动条、吸附是强制模式,浏览体验偏"作品展示"而非"阅读",正文型页面不适合。源码里还带了一套弧形跑马灯文字的实现,但当前页面没挂对应节点,属于可选扩展。
适用于摄影/品牌视觉作品集、产品首页整屏叙事、活动专题页、沉浸式图集展示等场景。