Cinematic Scroll
打造电影级滚动驱动3D视差网站
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Cinematic Scroll。 它的用途是：打造电影级滚动驱动3D视差网站 完整的 Skill 内容见：https://321skill.com/skills/cinematic-scroll-x-5/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我想用Cinematic Scroll为我的产品首页添加一个滚动驱动的3D视差效果，当用户滚动时，产品图片呈现深度倾斜和光影变化。’ 它会自动生成对应的HTML/CSS/JS代码，并配置好动画参数，实现沉浸式展示。
介绍
传统网页滚动效果单调，难以营造沉浸式叙事体验。该技能提供了一套完整的滚动驱动动画方案，包括视差、3D倾斜、环境变形等效果，让网站像电影一样随着滚动逐步展开章节、揭示内容，大幅提升视觉冲击力和用户停留时长。
使用方式非常简单：通过npm安装后，在HTML元素上添加自定义数据属性或调用JavaScript API，即可快速实现固定章节揭示、英雄视差、深度图片、悬停倾斜等效果。无需复杂的手动计算，只需少量代码就能创建流畅的滚动动画。
适合前端开发、全栈开发以及需要制作高质感演示网站或产品着陆页的内容创作者。无论是品牌官网、产品介绍页还是创意作品集，都能借助该技能快速获得专业级的滚动交互体验。
建议在项目初期就规划好动画层次，避免过度使用导致性能下降；同时注意移动端兼容性，可针对低端设备禁用部分高消耗动画，并通过CSS will-change 属性优化渲染性能。
核心特点
与AOS、ScrollReveal等常见滚动动画库相比，Cinematic Scroll更专注于电影级叙事和3D倾斜效果，提供环境变形（environment-morphing）和深度图像（depth-image）等独特能力，适合需要强视觉冲击力和空间纵深感的高端项目。
注意事项
不适合纯文本内容为主的网站，过度动画可能干扰信息阅读；且需要浏览器支持CSS 3D变换（IE11及以下不支持）。
常见问题
是否支持React或Vue？
支持，可通过npm安装后在任意前端框架中使用，只需在组件挂载后初始化即可。
如何调整动画速度和触发时机？
通过数据属性（如data-scroll-speed、data-scroll-start）或全局配置项设置，文档中有详细参数说明。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/cinematic-scroll-x-5/raw/index.md 读取 Cinematic Scroll 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/cinematic-scroll-x-5/raw/index.md（查看排版版本）