SuperAPI AI 工具集

scroll-experience

设计与创作

查看项目

更新于 10-16 07:26

技能介绍

用途:Scroll Experience 定位为“滚动体验架构师”,用于规划与实现以滚动为叙事主线的网页体验,让用户通过滚动控制类似电影的节奏。

主要能力:滚动驱动动画、视差叙事、交互式叙事、电影感网页体验、滚动触发显现、进度指示、粘性区块、滚动吸附。

使用方式:资料给出滚动动画技术栈选型表,包括 GSAP ScrollTrigger(复杂动画,学习曲线中等)、Framer Motion(React 项目,低)、Locomotive Scroll(平滑滚动加视差,中)、Lenis(仅平滑滚动,低)、CSS scroll-timeline(简单原生,低)。示例用法包括用 gsap.registerPlugin(ScrollTrigger) 注册插件,通过 scrollTrigger 的 trigger、start、end、scrub 控制动画与滚动位置联动;Framer Motion 用 useScroll 与 useTransform 实现视差;CSS 原生用 animation-timeline: view() 与 animation-range 实现进入视口时显现。视差分层建议背景 0.2x、中景 0.5x、前景 1.0x、内容 1.0x、浮动元素 1.2x。粘性区块可用 CSS position: sticky 或 GSAP 的 pin,并支持横向滚动区块。

适用场景:产品功能走查、前后对比、分步流程、图片画廊,以及按“钩子—背景—旅程—高潮—收尾”节拍组织的叙事页面。

限制与反模式:资料明确反对滚动劫持(剥夺用户滚动控制、破坏可访问性与返回按钮预期)、动画过载(分散注意力、拖累性能)以及仅面向桌面的体验;建议增强而非替代滚动,保持自然滚动速度,移动优先并简化效果。具体性能指标、兼容范围与收费信息暂未提供。