Cinematic Scroll
构建电影级滚动驱动的3D倾斜、视差和场景变换网站
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Cinematic Scroll。 它的用途是：构建电影级滚动驱动的3D倾斜、视差和场景变换网站 完整的 Skill 内容见：https://321skill.com/skills/cinematic-scroll-x/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘为我的产品介绍页添加一个具有视差滚动效果的英雄横幅，并在用户向下滚动时，让产品图片有3D倾斜效果。’，它会引导你集成 Cinematic Scroll 的相应模块，生成必要的 HTML 结构和配置代码，快速实现电影般的视觉叙事效果。
介绍
Cinematic Scroll 是一个专注于创建具有电影级视觉效果的滚动驱动网站的 Skill。它解决了开发者需要为网站添加高级、沉浸式滚动交互效果（如视差、3D倾斜、章节固定揭示等）时，手动实现复杂且耗时的问题。
通过提供一系列预设的、易于集成的滚动驱动动画和交互模式，开发者可以快速为网站添加诸如英雄区域视差、深度图像效果、悬停倾斜、环境变形等高级功能，而无需从零开始编写复杂的滚动事件监听和 CSS/JavaScript 动画代码。
它非常适合前端开发者、全栈开发者以及任何希望提升网站视觉吸引力和交互体验的内容创作者或营销人员。无论是构建产品展示页、个人作品集，还是需要突出叙事性的营销落地页，都能从中受益。
使用建议：建议在项目初期规划阶段就考虑引入此 Skill，以便更好地设计页面结构与滚动动画的配合。注意，其效果重度依赖 JavaScript 和现代 CSS 特性，需确保目标用户的浏览器兼容性，并注意在性能较差的设备上可能出现的卡顿问题。
核心特点
与同类提供基础视差或滚动动画的库不同，Cinematic Scroll 更专注于构建“电影叙事感”的完整滚动体验，集成了章节固定揭示、环境变形等更复杂的场景过渡效果，而非单一的视觉元素动画。
注意事项
不适合对页面加载性能和旧版浏览器兼容性有极高要求的项目，或需要极简、无 JavaScript 交互的静态内容网站。
常见问题
Cinematic Scroll 能用于移动端网站吗？
可以，但需注意复杂3D效果在移动设备上的性能表现，建议进行充分测试和简化。
这个 Skill 需要搭配特定的前端框架使用吗？
不强制，它是一个基于现代 Web 技术（JS/CSS）的解决方案，可以集成到 React、Vue 等框架或纯 HTML 项目中。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/cinematic-scroll-x/raw/index.md 读取 Cinematic Scroll 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/cinematic-scroll-x/raw/index.md（查看排版版本）