Motion Lexicon
搜索/
English
系统
动效组件

视差

让前后景以克制的速度差移动，建立轻量层次感。

预览

实时预览

滚动时背景与前景以不同速度移动，从而营造纵深感。

预览
滚动
视差
继续
权威词义

术语定义与近义词辨析

英文定义逐字保留自 Animation Vocabulary；中文翻译和辨析帮助你选对术语。

核心术语parallax

视差

Parallax
权威英文定义

Background and foreground move at different speeds while scrolling, creating depth.

中文翻译

滚动时背景与前景以不同速度移动，从而营造纵深感。

查看全部 91 个术语
设计规范

使用这段动效前的判断

目的、频率、触发、时序、可打断性和手势规则共同决定实现。

目的

用前后景的克制速度差建立层次，同时保持主体内容稳定可读。

频率

适合低频头图和展示区；长页面重复使用会增加视觉负担。

触发

由页面滚动持续驱动，运动幅度与容器可见区间绑定。

进入 / 离开

进入视口前后保持连续位置，避免在观察阈值处突然启动。

可打断性

方向变化时直接跟随当前滚动位置，无需播放补偿动画。

手势与键盘

不接管滚动手势；背景层设置 pointer-events 规则，避免遮挡内容操作。

减弱动效策略

所有层固定在信息最清晰的位置，移除速度差。

输出

复制到你的界面

当前参数会同步生成视觉状态 CSS、语义 HTML、所需的原生 JS 运行时和交互提示词。

随参数实时更新
motion.css
.motion-demo.motion-demo--parallax {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 34rem);
  min-height: 15rem;
  padding: 2rem;
  overflow: hidden;
  color: #18181b;
  background: #fafafa;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  isolation: isolate;
}

.motion-demo.motion-demo--parallax *, .motion-demo.motion-demo--parallax *::before, .motion-demo.motion-demo--parallax *::after {
  box-sizing: border-box;
}

.motion-demo.motion-demo--parallax .motion-surface {
  position: relative;
  display: grid;
  gap: 0.65rem;
  width: min(100%, 18rem);
  padding: 1.25rem;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 10px 28px rgb(0 0 0 / 7%);
}

.motion-demo.motion-demo--parallax .motion-line {
  display: block;
  width: 100%;
  height: 0.5rem;
  background: #e4e4e7;
  border-radius: 999px;
}

.motion-demo.motion-demo--parallax .motion-line:last-child { width: 62%; }

.motion-demo.motion-demo--parallax .motion-button {
  position: relative;
  min-height: 2.75rem;
  padding: 0.75rem 1.1rem;
  color: white;
  font: inherit;
  font-weight: 700;
  background: #18181b;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.motion-demo.motion-demo--parallax .motion-button:focus-visible { outline: 3px solid rgb(37 99 235 / 32%); outline-offset: 3px; }

.motion-demo.motion-demo--parallax .motion-action-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.motion-demo.motion-demo--parallax .motion-replay-scene {
  width: min(100%, 22rem);
  display: grid;
  place-items: center;
}

.motion-demo.motion-demo--parallax .motion-pausable-scene {
  width: min(100%, 22rem);
  display: grid;
  place-items: center;
}

.motion-demo.motion-demo--parallax button.motion-surface {
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.motion-demo.motion-demo--parallax .motion-replay-button,
.motion-demo.motion-demo--parallax .motion-undo-button,
.motion-demo.motion-demo--parallax .motion-dismiss-button,
.motion-demo.motion-demo--parallax .motion-pause-button {
  min-height: 2.75rem;
  padding: 0.65rem 0.9rem;
  color: #18181b;
  font: 650 0.78rem/1 ui-sans-serif, system-ui, sans-serif;
  background: #ffffff;
  border: 1px solid #d4d4d8;
  border-radius: 7px;
  cursor: pointer;
}

.motion-demo.motion-demo--parallax .motion-replay-button:focus-visible,
.motion-demo.motion-demo--parallax .motion-undo-button:focus-visible,
.motion-demo.motion-demo--parallax .motion-dismiss-button:focus-visible,
.motion-demo.motion-demo--parallax .motion-pause-button:focus-visible,
.motion-demo.motion-demo--parallax [data-reorder-item]:focus-visible,
.motion-demo.motion-demo--parallax [data-swipe-target]:focus-visible {
  outline: 3px solid rgb(37 99 235 / 32%);
  outline-offset: 3px;
}

.motion-demo.motion-demo--parallax .motion-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.motion-demo.motion-demo--parallax .motion-ripple-ink {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  background: rgb(255 255 255 / 72%);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
}

.motion-demo.motion-demo--parallax .motion-state-stack { position: relative; width: min(100%, 18rem); height: 9rem; }
.motion-demo.motion-demo--parallax .motion-state { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; background: #ffffff; border: 1px solid #e4e4e7; border-radius: 8px; }
.motion-demo.motion-demo--parallax .motion-state--to { background: #18181b; color: white; }

.motion-demo.motion-demo--parallax .motion-scroll-track > span { color: #71717a; font: 600 0.72rem/1.2 ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.motion-demo.motion-demo--parallax .motion-orbit-item { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: white; background: #2563eb; border-radius: 50%; }
.motion-demo.motion-demo--parallax .motion-text-stack { position: relative; width: min(100%, 18rem); min-height: 4rem; }
.motion-demo.motion-demo--parallax svg { width: min(100%, 20rem); height: auto; }

.motion-demo.motion-demo--parallax { max-height: 15rem; overflow-y: auto; place-items: start center; }
.motion-demo.motion-demo--parallax .motion-scroll-track { display: grid; place-items: center; gap: 10rem; width: 100%; min-height: 48rem; padding-block: 5rem; }
.motion-demo.motion-demo--parallax .motion-surface { animation: motion-parallax linear both; animation-timeline: scroll(nearest); animation-range: 10% 80%; }
@keyframes motion-parallax { from { transform: translateY(17px); } to { transform: none; } }
@supports not (animation-timeline: scroll()) { .motion-demo.motion-demo--parallax .motion-surface { animation: motion-parallax 700ms linear both; } }

@keyframes motion-parallax-reduced-fade {
  from { opacity: 0.84; }
  to { opacity: 1; }
}

.force-reduced-motion .motion-demo.motion-demo--parallax {
  animation: motion-parallax-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
}

.force-reduced-motion .motion-demo.motion-demo--parallax *,
.force-reduced-motion .motion-demo.motion-demo--parallax *::before,
.force-reduced-motion .motion-demo.motion-demo--parallax *::after {
  animation: none !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-property: opacity, color, background-color, border-color !important;
  transition-duration: 160ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}

.force-reduced-motion .motion-demo.motion-demo--parallax .motion-button,
.force-reduced-motion .motion-demo.motion-demo--parallax [data-reorder-item],
.force-reduced-motion .motion-demo.motion-demo--parallax [data-swipe-target],
.force-reduced-motion .motion-demo.motion-demo--parallax [data-spring-target] {
  transform: none !important;
}

.force-reduced-motion .motion-demo.motion-demo--parallax .motion-path { stroke-dashoffset: 0 !important; }
.force-reduced-motion .motion-demo.motion-demo--parallax .motion-word--from { opacity: 0 !important; visibility: hidden; }
.force-reduced-motion .motion-demo.motion-demo--parallax .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .motion-demo.motion-demo--parallax {
    animation: motion-parallax-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
  }

  .motion-demo.motion-demo--parallax *, .motion-demo.motion-demo--parallax *::before, .motion-demo.motion-demo--parallax *::after {
    animation: none !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color !important;
    transition-duration: 160ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .motion-demo.motion-demo--parallax .motion-button,
  .motion-demo.motion-demo--parallax [data-reorder-item],
  .motion-demo.motion-demo--parallax [data-swipe-target],
  .motion-demo.motion-demo--parallax [data-spring-target] {
    transform: none !important;
  }

  .motion-demo.motion-demo--parallax .motion-path { stroke-dashoffset: 0 !important; }
  .motion-demo.motion-demo--parallax .motion-word--from { opacity: 0 !important; visibility: hidden; }
  .motion-demo.motion-demo--parallax .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }
}
检查要点

交付前检查

  • 控制速度比，主体文字保持接近页面滚动速度。
  • 检查移动端地址栏变化不会放大位移。
无障碍

保持信息可达

减弱动效

所有层固定在信息最清晰的位置，移除速度差。

参数

参数参考

参数范围 / 选项默认值作用
distance0px–160px48px控制元素移动的空间距离。
speed10%–80%35%调节速度差。
axis垂直 / 水平垂直选择轴向。
相关条目
滚动揭示滚动驱动动画页面过渡