scroll-experience
构建沉浸式滚动动画
打造电影般的滚动驱动网页体验，通过视差叙事和引人入胜的动画在用户首次滚动时即抓住其注意力。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“scroll-experience”。 为我的产品页面英雄区块创建视差效果
预期结果:
一个具有三个深度层的英雄区块：背景图像以 0.2x 滚动速度移动，产品视觉以 0.5x 移动，标题文本以正常速度移动。对容器使用 CSS sticky 定位，使用 GSAP 实现平滑视差移动。
正在使用“scroll-experience”。 添加滚动触发的文本揭示效果
预期结果:
使用透明度和 transform 组合动画的文本元素。使用滚动位置触发：0% 显示第一个词高亮，50% 显示第二个词，状态之间平滑过渡。
正在使用“scroll-experience”。 构建逐步流程区块
预期结果:
一个固定区块，每个步骤在用户滚动时依次淡入。步骤居中显示，带有显示当前位置的进度指示器。使用 GSAP ScrollTrigger 配合 markers 实现精确计时。
安全审计
安全This skill is a front-end development resource for scroll-driven web experiences. Static findings flagged 'external_commands' (backtick execution) and 'weak cryptographic algorithms' - both are FALSE POSITIVES. The backticks are markdown code fence delimiters, not shell commands. The crypto detections are substring matches in words like 'experiences' and 'interactive'. No actual security risks exist. This skill only provides JavaScript, React, and CSS code examples for scroll animations.
质量评分
你能构建什么
落地页设计器
创建令人惊艳的产品落地页，通过滚动驱动的揭示效果逐步引导用户了解功能
交互式叙事工具
构建叙事体验，滚动可推进故事进展，配合视差背景和动画文本
作品集增强器
将个人作品集转变为引人入胜的体验，通过滚动触发动画展示作品
试试这些提示
I need a simple scroll-triggered animation for my landing page. When users scroll to a section, elements should fade in and move up. Use GSAP ScrollTrigger with a smooth scrub effect.
Create a hero section with parallax depth. I want multiple layers moving at different speeds: background at 0.2x, midground at 0.5x, and foreground at normal speed. The content should remain readable.
Build a sticky section where text stays pinned on the left while images scroll on the right. Use GSAP to pin for 1000px and animate content sequentially as user scrolls.
Convert vertical scroll into horizontal movement for an image gallery. When users scroll past a trigger point, the experience should lock into horizontal scroll mode until the gallery completes.
最佳实践
- 从移动端优先设计开始 - 在添加桌面端复杂度之前先在触摸设备上测试滚动交互
- 对简单动画使用 CSS scroll-timeline 以减少 JavaScript 依赖并提高性能
- 将滚动关联动画的持续时间保持在 300ms 以下以维持响应性
- 始终为偏好减少动画的用户提供回退静态内容
避免
- 滚动劫持 - 切勿完全覆盖原生滚动行为，用户会失去控制并感到沮丧
- 动画过载 - 过多移动元素会分散对内容的注意力并影响性能
- 仅桌面端体验 - 移动端用户占大多数，应享有同等质量的体验
- 忽视无障碍性 - 确保滚动动画尊重 prefers-reduced-motion 并支持键盘导航