这是一款横向滚动 3D 卡片轮播效果,基于 HTML+CSS+JavaScript(GSAP + ScrollTrigger)实现。玩法是"用竖向滚轮驱动横向浏览":页面滚到该区块时把它钉在屏幕中央,此后继续滚动不再上移,而是让卡片队列横向推进,走完全程才放行。卡片本身做了 Coverflow 式的立体处理——每帧根据它离屏幕中心的距离实时算出 Y 轴旋转、缩放和 Z 轴纵深,越靠中间越正、越大,两侧则倾斜后退,形成一条弧形排布。容器开了透视和 3D 上下文,卡片是黏土质感的内外双层阴影,标题与下方邮箱订阅表单则用滚动触发的上移淡入。
适用于产品陈列、品牌故事、作品集、电商首页展示区等场景。