安全下载,经人工审核 精选优质前端模板 支持定制开发咨询 持续更新资源
GSAP 3D 数据卡片落地页 — 滚动分屏动画与鼠标跟随倾斜布局效果
编号:GSAP滚动动画

GSAP 3D 数据卡片落地页 — 滚动分屏动画与鼠标跟随倾斜布局效果

大小 35 KB
总文件 6 个
发布 2026-08-08
更新 2026-08-08
架构 GSAP + ScrollTrigger
分类 前端资源 - GSAP动画
目录 结构详情
童哲网
童哲网
 ·  专注前端模板资源分享
人工审核 安全可信

    这是一款 3D 数据卡片落地页,基于 GSAP + ScrollTrigger 实现。首屏是三张竖排的胶囊卡片,每张分上下两块——上面是分类名,下面列着这个方向的工具清单,背景衬着几道向外扩散的弧线和一层细颗粒质感。

    交互做得比较讲究。鼠标移到卡片上,它会跟着指针方向轻微倾斜并抬起来,移开时用弹性回弹归位,不是那种生硬的复位;鼠标在首屏移动时背景弧线会缓慢跟随,形成层次错落的视差。往下滚动,三张卡片分别向左、向右滑开,中间那张略微缩小,弧线同时向外扩张,标题渐隐——整段动画是跟着滚动进度走的,滚多少动多少,可以来回拖。

    再往下是工具卡片区和数字滚动的结尾区,卡片依次浮现,数字从 0 跳到目标值。整体是深色底加衬线强调字的排版风格,克制但有分量。

    适合工具导航站、AI 产品聚合页、设计工作室作品集、新品发布落地页。

模板目录结构

    最新资源

    建筑施工与工程服务 HTML 响应式网站模板

    筑衡

    建筑施工与工程服务 HTML 响应式网站模板
    AI 人工智能与技术服务 HTML 响应式网站模板

    博思科技

    AI 人工智能与技术服务 HTML 响应式网站模板
    Three.js照片胶带,拖拽展开与卷轴回收交互特效

    卷轴相册

    Three.js照片胶带,拖拽展开与卷轴回收交互特效
    虚拟货币数字资产与质押管理 HTML 移动端界面模板

    押智台

    虚拟货币数字资产与质押管理 HTML 移动端界面模板
    移动应用与软件产品 HTML 响应式落地页模板

    缤格

    移动应用与软件产品 HTML 响应式落地页模板
    JS横向波浪相册,拖拽惯性与键盘滚动展示特效

    起伏相册

    JS横向波浪相册,拖拽惯性与键盘滚动展示特效