밴드 슬라이드Band Slide

Band Slide

밴드 슬라이드

다른 이름Also known as · Band slide · 띠 슬라이드

148

도판Fig. 148. 밴드 슬라이드 · Band Slide · power3.inOut

재생 속도Speed

가로나 세로로 나눈 영상 띠가 조금씩 다른 시점이나 방향으로 이동하며 다음 화면이 나타난다Video bands split horizontally or vertically slide at slightly different timings to reveal the next screen.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

영상 띠들이 조금씩 다른 타이밍으로 밀려 나가고 다음 화면이 드러난다. 줄 단위의 리듬이 있다Gives a line-by-line rhythm to the whole frame.

언제 쓰나Use whenUSE WHEN

목록, 표, 가로줄 구조의 화면을 줄 단위로 바꿔 넘길 때
발표 섹션 전환에서 정돈된 리듬을 만들 때

When switching a list, table, or row-structured screen line by line
To create a tidy rhythm in presentation section transitions

과용 주의AvoidAVOID

띠 시차는 0.02~0.06초로 한다
띠 경계는 1px 겹치게 clip한다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

화면을 가로 띠 8개로 나눠 40ms 간격으로 순서대로 오른쪽으로 밀려 나가며 750ms 안에 다음 화면이 완전히 드러난다

과용 · 나쁜 사례OVERUSE

띠 시차가 0.15초 이상이라 전체가 늦어지거나, 띠 경계에 1px 틈이 생겨 선이 보인다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	750ms	600~900ms	띠 하나당 0.5s
띠 수	8	6~12	135px 높이
시차	40ms	20~60ms	순차
이동량	1920px		화면 폭
이징	power3.inOut	power2~power4

GSAP

for (let i = 0; i < 8; i++) {
  tl.to(`.band-${i}`, { x: 1920, duration: 0.47, ease: 'power3.inOut' }, i * 0.04);
} // 마지막 띠 종료 = 0.28 + 0.47 = 0.75s

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

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 화면 전환에 밴드 슬라이드를 넣어줘. 화면을 가로 띠 8개(각 135px)로 나눠 각 띠가 x 1920까지 0.47초 power3.inOut으로 밀려 나가고, 띠 i는 i*0.04초 늦게 출발해. 마지막 띠가 0.75초에 끝나게 하고, 다음 장면은 아래에 미리 깔아 줘. 타임라인 하나로 seek 가능하게 해줘.

Add a Band Slide to <target>. Split the frame into 8 horizontal bands of 135px; each slides to x 1920 over 0.47s with power3.inOut, band i starting i*0.04s later, so the last band ends at 0.75s. Place the next scene underneath in advance. One seekable GSAP timeline.

Codex

<파일>에 밴드 슬라이드를 구현해. 띠 8개, .band-i x 0에서 1920, duration 0.47, power3.inOut, position i*0.04. 0.15초, 0.3초, 0.5초, 0.75초 시점을 캡처해 띠가 위에서 아래로 순서대로 밀려 나가는지, 0.75초에 이전 장면이 없는지, 띠 경계에 틈이 없는지 확인해.

Implement Band Slide in <file>. 8 bands; .band-i x 0 to 1920, duration 0.47, power3.inOut, position i*0.04. Capture at 0.15s, 0.3s, 0.5s, and 0.75s to confirm bands leave in order from top to bottom, the previous scene is gone at 0.75s, and there are no gaps at band boundaries.