视差滚动 · Parallax Scrolling
英文：Parallax Scrolling
动效与交互难度：入门 ★
🗣️一句话大白话
滚动时不同图层以不同速度移动（背景慢、前景快），制造出纵深。让页面“有层次”最常用的滚动动效，但也最容易做过头。视差的核心是“速度差”：背景移动速度是内容的一半，眼睛就会感知到深度。告诉 AI“背景慢 50%、前景正常”比“加个视差”精确。适合 Hero 区、图文区、长滚动页；速度差过大（背景静止/反向）会头晕。移动端要减量。
🖼️样图参考
🎬真实场景
Hero 首屏、长滚动页、产品介绍、品牌页
📮你可以这样说
「【图像模型版】设计滚动分镜：背景层移动速度为前景的 50%，制造纵深；多层时每层速度逐层递减，滚动 1 屏内完成全部位移。 【HTML/CSS/JS 版】[背景层] 用 JS 滚动监听 transform: translateY(scrollY × 0.5)，[前景内容] translateY(scrollY × 0.1)；用 requestAnimationFrame 节流，移动端关闭或减半。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：视差=背景不动；实际是“速度差”，背景仍在动只是慢
- ▸速度差过大（>3 倍）或反向会头晕
🚫什么时候别用
- ✗内容密集可读的长文（分散注意力）
- ✗移动端首屏（性能与晕动）
🧩常见变体
单层视差多层视差方向相反视差
💡小贴士
- ✦背景速度 = 前景的 30%-60% 最舒适，别让背景彻底不动
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（中篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗