Cinematic Scroll
构建电影级滚动视差与3D倾斜交互网站
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Cinematic Scroll。 它的用途是：构建电影级滚动视差与3D倾斜交互网站 完整的 Skill 内容见：https://321skill.com/skills/cinematic-scroll-x-2/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘为我的产品英雄区域创建一个视差滚动效果，背景图缓慢移动，前景文字正常滚动。’，它会生成结合了CSS `background-attachment`、`transform` 属性和JavaScript滚动事件监听器的代码框架。或者
对AI说：‘我需要一个当用户悬停在产品卡片上时，卡片产生3D倾斜的效果。’，它会提供使用CSS `transform: rotateX/Y` 和 `transition` 的实现方案。
介绍
Cinematic Scroll 是一个专注于实现高级滚动交互效果的开发工具，它解决了传统网页滚动体验单调、缺乏沉浸感和视觉冲击力的问题。通过集成视差滚动、3D倾斜、环境变形和章节固定揭示等效果，它能让静态网页转变为具有电影叙事感的动态体验。
开发者可以通过安装该Skill，在AI助手的帮助下，快速生成实现这些复杂视觉效果的核心代码片段。无论是需要英雄区域的视差背景、深度图像效果，还是随着滚动而变化的章节内容，都可以通过简单的指令来构建，无需从零开始编写复杂的JavaScript和CSS。
这个Skill非常适合前端开发者和全栈开发者，特别是那些需要为产品官网、品牌故事页、作品集或营销落地页打造独特视觉吸引力的项目。对于希望提升网站交互品质和用户参与度的UI设计师和产品经理来说，它也是一个强大的原型实现工具。
使用建议：建议在项目设计阶段就明确需要哪些滚动效果，以便更精准地向AI助手提出请求。由于涉及大量CSS 3D变换和滚动监听，在移动端使用时需注意性能优化和兼容性测试。
核心特点
与单一实现视差或倾斜效果的库不同，Cinematic Scroll 将多种电影级滚动交互（如环境变形、固定章节揭示）整合为一个连贯的技能集，并提供针对这些复杂效果的专用代码生成能力，而非通用代码片段。
注意事项
不适合对页面加载性能和代码体积有极端要求的轻量级应用或移动端优先的简单页面。
常见问题
Cinematic Scroll 能实现哪些具体的滚动效果？
可实现视差滚动、3D倾斜（hover-tilt）、环境变形、固定章节揭示（pinned chapter reveals）以及深度图像人物（depth-image figures）等效果。
使用这个Skill需要很强的JavaScript基础吗？
不需要，你可以通过自然语言描述需求，AI会生成对应的实现代码，但理解生成代码的原理有助于定制和调试。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/cinematic-scroll-x-2/raw/index.md 读取 Cinematic Scroll 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/cinematic-scroll-x-2/raw/index.md（查看排版版本）