动画 · 滚动触发 · 12

视差背景

视差背景 = 滚动时各图层以不同速度移动，在不离开合成层的前提下制造纵深。

尊重 prefers-reduced-motion：动画关闭，仅保留终态。

怎么向 AI 描述它

Build a two-layer parallax: back drifts slowly, front faster, both transform-only and scroll-linked via animation-timeline: view().

Reduce the speed gap to near-zero so the depth is subtle and text stays calm.

Drive each layer with its own animation-timeline: view() and animation-range, expose --parallax-depth as a single multiplier, add an @supports fallback that disables parallax, and under prefers-reduced-motion freeze both layers. Keep motion under 16px of travel.

修改类 Prompt 只动目标，不碰页面其余部分。

视差背景是什么？

视差伪造纵深：后层慢移、前层快移，场景显得立体。速度差要小——视差过强让文字难读，还可能引发晕动。原生 CSS 滚动驱动动画免去滚动监听。

动画标本

触发: scroll
技术: scroll-driven
时长: 3s
缓动: ease-in-out
性能: transform

什么时候用

Hero backgrounds, product storytelling, landing pages
Any scene that benefits from a sense of depth

什么时候别用

Text-heavy sections — parallax fights reading
Users prone to motion sickness (keep it minimal or off)

Small speed gap. Heavy parallax hurts readability and can cause nausea; offer a reduced-motion lock.

获取代码

.anim-el {
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }

.parallax { width: min(240px, 100%); height: 150px; border-radius: 12px; overflow: hidden; position: relative; background: #0f1226; }
.parallax .par-layer { position: absolute; inset: -20px; }
.parallax .par-back {
  background: radial-gradient(60% 60% at 30% 30%, color-mix(in srgb, var(--anim-accent) 70%, transparent), transparent 70%), radial-gradient(50% 50% at 75% 70%, #2a2f5e, transparent 70%);
  animation-name: parBack;
  animation-duration: var(--anim-duration, 3s);
  animation-timing-function: var(--anim-easing, ease-in-out);
}
.parallax .par-front {
  background: radial-gradient(40% 40% at 60% 40%, rgba(255, 255, 255, 0.35), transparent 70%);
  animation-name: parFront;
  animation-duration: var(--anim-duration, 3s);
  animation-timing-function: var(--anim-easing, ease-in-out);
}
@keyframes parBack { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes parFront { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } }

<div class="parallax">
  <div class="par-layer par-back anim-el"></div>
  <div class="par-layer par-front anim-el"></div>
</div>

复制后即可用于你的项目。动效仅作用于 transform / opacity；颜色取自 --anim-accent。

另见

风格

玻璃拟态→

主题

AI SaaS 落地页→

组件

卡片→

视差背景

视差背景是什么？

动画标本

什么时候用

什么时候别用

另见

组件

动画

风格

主题

Prompt

术语

反模式

视差背景

视差背景是什么？

动画 标本

什么时候用

什么时候别用

另见

动画标本