Design Atlas
한국어
◧ Film & photo

Motion parallax

모션 패럴랙스

As the viewpoint shifts sideways, near objects sweep past fast and distant ones barely move — a depth cue the brain reads even with one eye closed.

Also known as: Depth cueParallax depth
···
html
<div class="depth">
  <div class="layer far"></div>
  <div class="layer mid"></div>
  <div class="layer near"></div>
</div>
<div class="eye"></div>
css
.depth{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#bcd7ea,#e9e6d8 65%)}
.layer{position:absolute;left:-15%;right:-15%;bottom:0}
.far{height:30%;background:#a9bdae;opacity:.6;
  clip-path:polygon(0 100%,0 58%,12% 32%,24% 62%,38% 22%,52% 56%,66% 18%,80% 50%,92% 26%,100% 56%,100% 100%)}
.mid{height:22%;background:#79a082;opacity:.8;
  clip-path:polygon(0 100%,0 42%,16% 72%,30% 22%,46% 62%,60% 12%,76% 56%,90% 26%,100% 60%,100% 100%)}
.near{height:15%;background:#3f5744;
  clip-path:polygon(0 100%,0 24%,10% 62%,22% 8%,34% 52%,48% 2%,60% 46%,74% 12%,86% 56%,100% 18%,100% 100%)}
.eye{position:absolute;left:50%;bottom:4%;width:6%;aspect-ratio:1.6;border-radius:3px;background:var(--fg);
  opacity:.7;transform:translateX(-50%)}
js
const far=document.querySelector('.far');
const mid=document.querySelector('.mid');
const near=document.querySelector('.near');
const eye=document.querySelector('.eye');
function frame(t){
  const shift=Math.sin(t*0.0007);
  far.style.transform='translateX('+(shift*3)+'%)';
  mid.style.transform='translateX('+(shift*10)+'%)';
  near.style.transform='translateX('+(shift*22)+'%)';
  eye.style.left=(50+shift*30)+'%';
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);

Look out a train window and a nearby utility pole whips past while a distant mountain barely seems to move. That's not an illusion — it's geometry. As the viewpoint moves at one constant speed, an object close to it sweeps through a large angle of view while a distant object sweeps through a tiny one.

That's why even a single eye lets the brain sort out what's near and what's far. It's one of the recognized depth cues, distinct from the binocular disparity that needs two eyes to read.

Web and game UI fake this cue deliberately: split the background into layers, then move each layer at a different rate in response to scroll or mouse movement. The demo multiplies one shared shift value by a different factor per layer, showing how a single viewpoint move produces different speeds by depth.

When to use

Use it for depth in a scrolling hero background, or a game's 2.5D backdrop. Too many layers or too large a speed gap between them just reads as motion sickness.