WEBSITE825.4k01
返回作品库
GSAP 动态魔法秀:高性能滚动动画演示站
HTML, CSS, JAVASCRIPT, GSAP CDN · 做网站 / 落地页
基于 GSAP ScrollTrigger 的沉浸式滚动动画体验页,零依赖丝滑动效。
基于 GSAP ScrollTrigger 的沉浸式滚动动画体验页,零依赖丝滑动效。
GSAPScrollTrigger动画前端动效交互体验GreenSock
0
复制 copy
0
分享 share
0
点赞 like
可复现三件套
预计 20 分钟前置:会写基础 HTML/CSS/JS;浏览器即可预览
APROMPT / 提示词
用 Cursor 创建一个单页滚动动画网站,引入 GSAP 和 ScrollTrigger CDN。要求实现:全屏 Hero 区文字逐字入场,随滚动卡片从两侧飞入,视差背景移动,页面底部元素弹性淡出。使用清晰的中文文案,配色现代,响应式设计。最后输出一个可直接部署的 index.html。
BSOURCE / 源码
// 入口片段 src/index.js —— 完整源码见仓库 import { gsap, Power0, Power1, Power2, Power3, Power4, Linear, Quad, Cubic, Quart, Quint, Strong, Elastic, Back, SteppedEase, Bounce, Sine, Expo, Circ, TweenLite, TimelineLite, TimelineMax } from "./gsap-core.js"; import { CSSPlugin } from "./CSSPlugin.js"; const gsapWithCSS = gsap.registerPlugin(CSSPlugin) || gsap, // to protect from tree shaking TweenMaxWithCSS = gsapWithCSS.core.Tween; export { gsapWithCSS as gsap, gsapWithCSS as default, CSSPlugin, TweenMaxWithCSS as TweenMax, TweenLite, TimelineMax, TimelineLite, Power0, Power1, Power2, Power3, Power4, Linear, Quad, Cubic, Quart, Quint, Strong, Elastic, Back, SteppedEase, Bounce, Sine, Expo, Circ };
HOW IT'S MADE / 拆解
01
创建 HTML 文件,通过 CDN 引入 gsap.min.js 与 ScrollTrigger 插件。
02
使用 gsap.to() 与 ScrollTrigger 编写滚动触发动画(元素淡入、位移、缩放)。
03
用 Live Server 或直接部署到静态托管服务(如 Vercel)预览效果。
Dr.Sharp 点评
Dr. Sharp:把瑞士军刀当展品?没问题,只要刀柄镶钻,旁加炫光。GSAP 就是那刀,但设计感才是钻石。
GSAP 动态魔法秀:高性能滚动动画演示站 · vbai.studio/works/gsap
复制 prompt 或源码即可在本地复现 · 喜欢就生成带示例图的分享海报