Cinematic Scroll
打造电影级滚动视差动画网站
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Cinematic Scroll。 它的用途是：打造电影级滚动视差动画网站 完整的 Skill 内容见：https://321skill.com/skills/cinematic-scroll-x-6/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'用Cinematic Scroll为产品介绍页制作一个英雄视差滚动效果，包含标题、背景图和3D倾斜卡片。' 它会自动生成HTML结构、CSS样式及JavaScript初始化代码，绑定滚动事件，实现随滚动深度变化的背景位移和卡片旋转。
介绍
Cinematic Scroll 是一个专注于滚动驱动动画的前端工具，帮助开发者快速实现电影级的视差、3D倾斜、环境变形等沉浸式网页特效。它解决了传统滚动动画实现复杂、性能开销高、难以统一管理多元素动画的问题，通过简洁的API即可完成章节揭示、英雄视差、深度图像悬停倾斜等效果。
使用方式非常直接：安装后，通过声明式配置或指令调用，即可在页面中绑定滚动容器、元素与动画参数，自动生成平滑的视差滚动和3D变换效果。无需手动编写大量JavaScript，即可实现类似Apple官网的滚动叙事体验。
适合前端开发、全栈开发以及内容创作者，尤其是需要制作品牌落地页、产品展示页、创意营销网站的用户。对于追求视觉冲击力但开发时间有限的团队，Cinematic Scroll 能显著提升效率。
建议在项目中优先评估性能需求，移动端低端设备可能需要降低动画复杂度。同时，该工具更适合静态或弱交互页面，若页面需要大量DOM动态更新，需注意与框架的兼容性。
核心特点
相比 ScrollTrigger、Locomotive Scroll 等通用滚动库，Cinematic Scroll 更专注于电影叙事感的视觉特效，内置 3D 倾斜、环境变形等高级动画预设，并针对“章节揭示”等典型场景做了开箱即用优化。
注意事项
不适合需要复杂交互逻辑或大量动态DOM操作的页面，且移动端低端设备性能开销较大。
常见问题
Cinematic Scroll 支持 React 或 Vue 吗？
支持，但需要自行封装组件或使用原生DOM引用来绑定动画元素，建议参考官方示例进行集成。
移动端性能如何优化？
可通过降低动画帧率、关闭3D倾斜、减少视差层数来优化，工具本身提供了 `mobilePreset` 配置选项。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/cinematic-scroll-x-6/raw/index.md 读取 Cinematic Scroll 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/cinematic-scroll-x-6/raw/index.md（查看排版版本）