用途:该技能用于构建由滚动触发的动画、视差滚动效果和与滚动位置联动的交互,营造沉浸式叙事体验。
主要能力:涵盖三类实现路线。Framer Motion 部分包含滚动进度条(useScroll + scrollYProgress)、视差位移(useTransform 映射 scrollY)、元素级滚动联动(useScroll 指定 target 与 offset)、进入视口显现(useInView 支持 once 与 margin)以及滚动驱动的文字逐词显现、3D 卡片和分区导航。GSAP ScrollTrigger 部分包含基础滚动触发动画(registerPlugin 注册插件后配置 trigger、start、end、toggleActions)、跟随滚动进度的 scrub 动画、固定区块(pin 配合时间轴)与横向滚动面板(xPercent 与 snap)。原生方案则给出基于 IntersectionObserver 的自定义 useInView Hook,支持 threshold、rootMargin、triggerOnce 参数。
使用方式:适用于包含滚动相关 Hook 的 .tsx 文件、hooks/useScroll*.ts、引入 ScrollTrigger 或 framer-motion 的 useScroll/useInView 的文件以及使用 Intersection Observer 的代码,相关库包括 framer-motion、gsap、@gsap/react。GSAP 需先 gsap.registerPlugin(ScrollTrigger)。
适用场景:滚动触发的入场动画、视差页面、滚动进度指示器、进入视口显现、横向滚动区块与基于滚动的叙事页面。
限制:相关资料给出了库的用法示例与文件匹配模式,未提供安装命令、版本要求、性能数据、收费信息或平台兼容性说明;官方文档原文为空,上述内容均以技能页面公开描述为准。