Cinematic Scroll
电影级滚动驱动网站特效工具
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Cinematic Scroll。 它的用途是：电影级滚动驱动网站特效工具 完整的 Skill 内容见：https://321skill.com/skills/cinematic-scroll-x-3/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'使用 Cinematic Scroll 在页面顶部实现一个英雄视差效果，背景图随滚动以不同速度移动，并带有轻微的3D倾斜。' 它会自动生成包含 data 属性和初始化脚本的 HTML 代码，以及对应的 CSS 变量配置，所见即所得。
介绍
在构建现代品牌展示页、产品介绍站或创意个人主页时，滚动驱动的视觉特效往往能大幅提升用户体验和品牌记忆度。Cinematic Scroll 解决了开发者在实现复杂视差、3D倾斜、环境变形等效果时面临的性能与代码复杂度平衡问题，提供一套开箱即用的声明式API，让开发者无需从零编写物理引擎或动画循环，即可快速产出电影级别的滚动叙事体验。
使用方式极简：通过 npm 或 CDN 引入后，在 HTML 元素上添加特定的 data 属性或调用 JavaScript 初始化函数，即可激活视差层、图钉章节、鼠标悬停倾斜等效果。支持自定义参数如深度系数、旋转角度、景深模糊等，并可配合 IntersectionObserver 实现滚动驱动的章节揭示动画。
适合前端开发者、全栈工程师以及需要落地创意视觉设计的 UI 设计师。尤其适合制作品牌故事页、游戏官网、虚拟展览、产品演示等需要强视觉冲击力的场景。对于追求像素级控制的高级开发者，也提供了底层钩子进行二次定制。
建议在项目初期即规划好效果层级与性能预算，避免在移动端或低端设备上叠加过多 3D 变换。同时注意与现有 CSS 框架的兼容性，推荐在容器内使用独立命名空间以减少样式冲突。
核心特点
与常见的视差库（如 Parallax.js、ScrollMagic）相比，Cinematic Scroll 原生集成 3D 倾斜、环境变形（如背景色随滚动渐变）和深度图图像视差，无需额外组合多个库即可实现电影级叙事效果。
注意事项
对老旧浏览器（如 IE11）兼容性较差，且在低端移动设备上可能因 GPU 压力导致掉帧。
常见问题
如何安装 Cinematic Scroll？
通过 npm 安装：npm install cinematic-scroll，或通过 CDN 引入 UMD 文件。
能否与 React、Vue 等框架一起使用？
可以。在组件挂载后初始化，并在卸载前调用销毁方法即可。官方提供了 React Hook 示例。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/cinematic-scroll-x-3/raw/index.md 读取 Cinematic Scroll 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/cinematic-scroll-x-3/raw/index.md（查看排版版本）