GSAPScrollTriggerParallax
哈比村卷轴
GSAP ScrollTrigger 电影感首屏
在下方区域内向下滚动页面，触发镜头推进与标题显现。
全屏打开演示简介
固定首屏随滚动推进：洞门图片放大、雾效消散、标题清晰显现，模仿电影片头。依赖 GSAP ScrollTrigger / ScrollSmoother。
收录日期 2026-01-07 · 来源 前端嘛 · Code Fun
技术栈
GSAPScrollTriggerScrollSmoother
解析
滚动时间轴
scrollTrigger pin + scrub 把滚动距离映射为 timeline 进度，多属性同步补间（scale、blur、opacity）。
嵌入提示
必须在详情页内**向下滚动**才能看到效果；卡片预览只能看到静帧，建议全屏体验。
应用场景
- ▸品牌官网首屏
- ▸摄影 / 旅行作品集
- ▸GSAP 滚动动画学习
完整源码
← 更多效果加载源码中…
请稍候…