깊은 다층 패럴랙스Deep Multi-layer Parallax

Deep Multi-layer Parallax

깊은 다층 패럴랙스

다른 이름Also known as · Deep Multi-layer Parallax · 깊은 다층 패럴랙스

561

도판Fig. 561. 깊은 다층 패럴랙스 · Deep Multi-layer Parallax · sine.inOut

재생 속도Speed

7겹 지면이 서로 다른 속도로 흘러 깊이를 드러내는 카메라 이동A horizontal camera move reveals depth through seven independently paced editorial layers.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

먼 층의 안정감과 가까운 층의 빠른 흐름Stable distant planes and fast foreground motion communicate spatial depth.

언제 쓰나Use whenUSE WHEN

넓은 도판을 가로질러 시선을 옮길 때
평면 정보에 깊이와 흐름을 줄 때

Move attention across a wide editorial canvas.
Give flat information a clear sense of depth.

과용 주의AvoidAVOID

전경 글자는 blur 2px를 넘기지 않는다
완성 도판의 숫자와 문장을 겹치지 않는다

분류TagsTAGS

3D·깊이3D & Depth 주목 끌기Attention 설명Explain 전환Transition 설명 영상Explainer video 숏폼Short-form 발표Presentation 난이도 고급Advancedgsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

7겹 도판이 60~1080px 이동하고 전경 글자가 크게 지나간다

과용 · 나쁜 사례OVERUSE

모든 층을 같은 속도로 옮겨 깊이가 사라진다

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
레이어 수	7	5~9	각 층을 별도 래퍼로 둔다
카메라 이동	600px	400~900px	월드와 층 보정 이동을 합한다
속도비	0.1,0.25,0.45,0.7,0.95,1.3,1.8	0.1~1.8	가까울수록 크게 움직인다
전경 흐림	2px	1~2px	전경만 약간 흐리게 둔다

GSAP

tl.to('.world',{x:-600,duration:3,ease:'sine.inOut'},.3);
document.querySelectorAll('.layer').forEach(layer=>{
  const ratio=Number(layer.dataset.ratio);
  tl.to(layer,{x:-600*(ratio-1),duration:3,ease:'sine.inOut'},.3);
});

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 월드 x를 600px 이동하고 7개 층을 0.1, 0.25, 0.45, 0.7, 0.95, 1.3, 1.8배로 보정한다. 0.3초 시작, 3초 sine.inOut, 전경 blur 2px, 마지막 0.7초 홀드. 종이·먹·주홍 한 곳으로 구성하고 한 paused GSAP 타임라인을 쓴다.

Apply this effect to <대상>. Move the world 600px with seven layer ratios of 0.1, 0.25, 0.45, 0.7, 0.95, 1.3 and 1.8. Start at 0.3s, animate for 3s using sine.inOut, blur foreground text by 2px and hold for 0.7s. Use paper, ink and one vermilion focus with a single paused GSAP timeline.

Codex

<파일>에 월드 x를 600px 이동하고 7개 층을 0.1, 0.25, 0.45, 0.7, 0.95, 1.3, 1.8배로 보정한다. 0.3초 시작, 3초 sine.inOut, 전경 blur 2px, 마지막 0.7초 홀드. 0.33초, 1.67초, 2.33초, 3.87초 캡처로 깊이 변화, 잘림, 마지막 정지를 확인한다.

Implement in <파일>. Move the world 600px with seven layer ratios of 0.1, 0.25, 0.45, 0.7, 0.95, 1.3 and 1.8. Start at 0.3s, animate for 3s using sine.inOut, blur foreground text by 2px and hold for 0.7s. Capture at 0.33s, 1.67s, 2.33s and 3.87s to verify depth, clipping and the final hold.