视差滚动是一种网页设计技术，模拟人眼观察远近物体时的视觉差异——近处的物体移动快，远处的物体移动慢。在网页中，通过让不同层次的内容以不同速度响应滚动（或移动），创造出深度感和立体感。这种技术广泛应用于游戏（如经典2D横版游戏）、品牌展示页、产品故事叙述等场景，能显著提升用户的视觉体验和沉浸感。

🔍 上方演示器中，地面层移动最快（1.0x），天空层移动最慢（0.1x），模拟了真实世界中的视觉深度。

核心原理简洁明了：多层内容 × 不同移动速率 = 深度错觉。

• 层（Layer）：将页面内容分解为多个视觉层次（背景、中景、前景等），每层独立控制。
• 速率系数（Speed Factor）：每层分配一个介于0到1（或更大）之间的速度倍率。背景层倍率低（如0.1），前景层倍率高（如1.0）。
• 位移计算：层位移 = 基础滚动偏移 × 速度倍率。基础偏移相同时，各层实际移动距离不同。
• 视觉结果：快速移动的前景层与缓慢移动的背景层之间产生相对位移差，大脑将其解读为深度信息。

性能方面：

• ✅ 使用 transform: translateX/Y 和 will-change 可触发GPU合成，性能开销极低。
• ✅ 使用 requestAnimationFrame 保证60fps流畅动画。
• ⚠️ 避免在滚动事件中触发强制同步布局（如读取 offsetTop 后立即修改样式）。
• ⚠️ 移动端注意减少层数和元素数量，低端设备GPU资源有限。

SEO方面：

• ✅ 视差效果本身不影响SEO——搜索引擎爬虫不执行JS动画，它们读取的是静态HTML内容。
• ✅ 关键内容应放在前景层（移动最快的层），确保爬虫优先抓取。
• ⚠️ 避免将重要文字内容隐藏在需要交互才能看到的层中。
• ⚠️ 确保所有层的文本内容在禁用JS时仍然可访问（渐进增强原则）。

• 触摸交互：使用 touch-action: none 防止浏览器默认手势干扰自定义拖拽。
• 性能预算：移动端GPU性能有限，建议层数控制在5层以内，减少复杂阴影和滤镜。
• 元素尺寸：各层视觉元素应使用 vw 单位或媒体查询适配小屏幕，避免元素过大遮挡过多内容。
• 场景高度：移动端场景高度建议250-400px，过高的场景会挤压其他内容空间。
• 手势冲突：如果场景支持水平拖拽，需注意与页面垂直滚动的冲突——可在场景内使用独立的拖拽区域。

没有固定规则，但以下经验法则可供参考：

• 层数：3-7层为佳。太少（1-2层）效果不明显；太多（10+层）增加复杂度且视觉收益递减。
• 速度分布：采用指数或对数分布而非线性分布。例如 [0.05, 0.15, 0.35, 0.65, 1.0]，让深度感更自然。
• 最远层：速度倍率建议0.02-0.15，给人"几乎静止"的感觉（如天空、太阳）。
• 中间层：速度倍率0.2-0.7，体现渐变过渡。
• 最近层：速度倍率0.8-1.2，可略超1.0制造"掠过"的强烈动感。
• 测试迭代：最终效果需在目标设备上实际体验调整——使用上方演示器即可快速测试不同速率组合。