安全下载,经人工审核 精选优质前端模板 支持定制开发咨询 持续更新资源
GSAP 滚动穿越首屏特效 — 标题上下分离,背景图迎面推近的 Y2K 风格
编号:GSAP滚动动画

GSAP 滚动穿越首屏特效 — 标题上下分离,背景图迎面推近的 Y2K 风格

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

    这是一款滚动穿越首屏效果,基于 GSAP + ScrollTrigger 实现。首屏是超粗黑体大标题压在照片上,背景是几团缓慢流动的荧光色渐变,四角有取景框式的直角标记,画面上飘着小徽章和星星,还叠了一层扫描线颗粒——典型的 Y2K 千禧年审美。

    滚动是核心:页面被钉住不动,上下两行标题分别往上下飞出,徽章和星星朝四面散开,取景框收缩消失,同时照片一路放大推近,像是穿过文字迎面而来。角落的年份数字跟着滚动进度从 2000 跳到 2026,细节做得挺到位。所有动作绑在同一条滚动进度上,往回滚会完整倒放。

    鼠标指针也做了替换,用了混合模式,在浅色区域是深色、在深色区域自动反白,跟这套配色配得很稳。

    要注意背景图是本地文件,自己用的时候记得换成自己的素材。

    适合创意工作室首页、作品集入口、潮牌和音乐活动页、新品发布落地页。

    

模板目录结构

    最新资源

    咖啡馆与餐饮品牌 HTML 响应式网站模板

    布润

    咖啡馆与餐饮品牌 HTML 响应式网站模板
    餐厅与餐饮品牌 HTML 响应式网站模板

    味澜

    餐厅与餐饮品牌 HTML 响应式网站模板
    建筑施工与工程服务 HTML 响应式网站模板

    筑衡

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

    博思科技

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

    卷轴相册

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

    押智台

    虚拟货币数字资产与质押管理 HTML 移动端界面模板