Design Atlas
한국어
▶ Motion graphics

2.5D camera parallax

2.5D 카메라 패럴랙스

Cutting a flat image into separate layers, placing them at different z-depths, and moving a virtual camera through them to fake real depth — an After Effects staple.

Also known as: Fake 3D cameraPhoto parallaxDepth compositing
···
html
<div class="stage">
  <div class="layer sky"></div>
  <div class="layer far"></div>
  <div class="layer mid"></div>
  <div class="layer near"></div>
</div>
css
.stage{position:absolute;inset:0;overflow:hidden}
.layer{position:absolute;left:-20%;right:-20%;animation:pan 6s ease-in-out infinite}
.sky{top:0;height:60%;background:linear-gradient(180deg,#1a2a4a,#2a3a6a);animation-duration:6s}
.far{bottom:22%;height:26%;background:#26304a;clip-path:polygon(0 100%,0 40%,12% 55%,26% 20%,40% 60%,55% 10%,68% 50%,82% 25%,100% 55%,100% 100%);
  animation-name:pan-far}
.mid{bottom:10%;height:24%;background:#3a4266;clip-path:polygon(0 100%,0 55%,15% 70%,32% 35%,50% 75%,66% 30%,83% 65%,100% 40%,100% 100%);
  animation-name:pan-mid}
.near{bottom:0;height:16%;background:#181c2e;clip-path:polygon(0 100%,0 60%,10% 80%,22% 45%,38% 85%,55% 40%,72% 80%,88% 50%,100% 75%,100% 100%);
  animation-name:pan-near}
@keyframes pan{0%,100%{transform:translateX(-1%)}50%{transform:translateX(1%)}}
@keyframes pan-far{0%,100%{transform:translateX(-3%)}50%{transform:translateX(3%)}}
@keyframes pan-mid{0%,100%{transform:translateX(-7%)}50%{transform:translateX(7%)}}
@keyframes pan-near{0%,100%{transform:translateX(-14%)}50%{transform:translateX(14%)}}

A single photo or illustration gets cut in Photoshop into foreground, midground, and background layers (the gaps left behind are patched with content-aware fill). Placed at different z-depths in After Effects' 3D space, these flat layers stack up like an actual set with real depth.

Add a camera layer and nudge it slightly — a truck-in, a pan — and the near layers swing much further across the frame than the far ones. It's the same principle as scroll parallax, just driven by a camera move instead of a scroll position. It's essentially an extension of the "Ken Burns effect" documentaries use to bring a still photo to life.

Push the camera too far and the gaps between cut-out layers start to show — the move only works within the range where those seams stay hidden.

When to use

Keep the camera move small — once the cut edges start to show, it stops looking like a 3D set and starts looking like a paper diorama.