Cinematic Scroll
打造电影级滚动驱动动画网站
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Cinematic Scroll。 它的用途是：打造电影级滚动驱动动画网站 完整的 Skill 内容见：https://321skill.com/skills/cinematic-scroll-x-7/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'请使用Cinematic Scroll为我的产品介绍首页添加滚动驱动的3D倾斜和视差效果，让每个章节像电影镜头一样逐帧呈现。' 它会自动生成带有 data-cs-parallax、data-cs-tilt 等属性的 HTML 结构，并给出对应的 CSS 初始化代码，实现页面滚动时元素的平滑倾斜与深度移动。
介绍
Cinematic Scroll 解决了前端开发中实现复杂滚动动画的痛点，例如 3D 倾斜、视差、环境变形、章节固定揭示等效果。传统上开发者需要手动监听滚动事件、计算偏移量、处理性能优化，流程繁琐且容易出错。该库提供声明式 API 和预置动画组件，让开发者只需少量配置即可获得电影般的视觉叙事体验。
使用方式非常简洁：通过 npm 安装后，在 HTML 元素上添加特定的 data 属性或调用 JavaScript 方法即可启用动画。支持零配置的默认效果，也允许自定义缓动、触发偏移、持续时间等参数。可与主流前端框架（React、Vue 等）无缝集成，无需额外适配。
适合前端开发者、UI 设计师、全栈开发者在产品首页、品牌展示页、活动专题页等场景中使用。尤其适合追求视觉冲击力和叙事节奏的营销型网站，能快速提升用户体验的沉浸感。运营人员和内容创作者也可通过该库为演示素材或宣传页面增加动态效果，无需深入编码。
使用建议：注意控制动画数量和复杂度，避免过度使用导致页面性能下降或用户眩晕。建议在移动端适当降低动画强度，并使用 CSS will-change 属性进行硬件加速。对于需要精确控制滚动交互的复杂应用，可结合 ScrollTrigger 等工具进行二次开发。
核心特点
与其他滚动动画库（如 ScrollMagic、AOS 等）相比，Cinematic Scroll 专为电影级 3D 倾斜和视差特效设计，提供内置的深度图像、环境变形、悬停倾斜等高级效果，且通过声明式属性即可调用，学习成本更低。
注意事项
不适合需要复杂交互逻辑或大量自定义滚动行为的应用，主要面向展示型、内容驱动的网站。
常见问题
这个库支持 React 或 Vue 吗？
支持，它是一个纯 JavaScript 库，可在任何框架中使用，只需在组件挂载后初始化即可。
如何实现固定章节揭示（pinned chapter reveal）？
在章节容器上添加 data-cs-pinned 属性，并设置 data-cs-reveal 为 true，即可实现滚动时章节固定并在合适时机揭示内容。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/cinematic-scroll-x-7/raw/index.md 读取 Cinematic Scroll 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/cinematic-scroll-x-7/raw/index.md（查看排版版本）