커버플로우Coverflow

Coverflow

커버플로우

다른 이름Also known as · Coverflow depth carousel · 커버플로 깊이 캐러셀 · Depth Gallery Rotation · 입체 갤러리 회전

560

도판Fig. 560. 커버플로우 · Coverflow · power2.inOut

재생 속도Speed

카드가 곡면 배열을 따라 이동하며 중앙 카드는 크고 정면, 옆 카드는 비스듬히 작아지는 목록Cards travel along a curved arrangement: the center card faces front and large, side cards tilt away and shrink.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

선택 항목과 주변 항목의 깊이 차를 보여 준다. 지금 보는 것과 곧 보게 될 것이 한 화면에서 구분된다Shows the depth difference between the selected item and its neighbors, so what is current and what is next are distinct.

언제 쓰나Use whenUSE WHEN

앨범, 제품, 템플릿을 넘겨 가며 고를 때
다음 항목을 살짝 보여 주며 순서를 안내할 때
여러 후보 중 하나를 선택하는 흐름을 설명할 때

Browse albums, products or templates.
Preview the next item while guiding sequence.
Explain choosing one from several candidates.

과용 주의AvoidAVOID

측면 카드 rotateY는 60도 이하로 한다
전환 중 z-index를 중앙 거리에 따라 다시 계산한다
카드는 9장을 넘기지 않는다

분류TagsTAGS

3D·깊이3D & Depth 순서·흐름Sequence 비교Compare 웹 UIWeb UI 제품 시연Product demo 발표Presentation 난이도 중급Intermediatecss

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

카드 7장 중 중앙 카드는 정면으로 크게, 좌우는 rotateY 45도와 작은 scale로 배열되고, 넘길 때 600ms에 옆 카드가 중앙으로 옮겨 온다

과용 · 나쁜 사례OVERUSE

측면 카드가 너무 기울어져 내용이 전혀 안 보이거나, 전환 중 z 순서가 바뀌지 않아 카드가 겹쳐 잘못 보인다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
전환 시간	0.6s	0.4~0.9s	한 칸 이동
perspective	900px	700~1400px	부모
측면 회전	45deg	30~60deg	중앙 거리 부호
카드 수	7	5~9	홀수 권장
이징	power2.inOut	power1~power3

GSAP

const place = (c, d) => gsap.to(c, { x: d * 320 + Math.sign(d) * 120, z: -Math.abs(d) * 160,
  rotationY: -Math.sign(d) * 45 * Math.min(1, Math.abs(d)), scale: 1 - Math.min(0.3, Math.abs(d) * 0.1),
  zIndex: 100 - Math.abs(d), duration: 0.6, ease: 'power2.inOut' });
cards.forEach((c, i) => tl.add(place(c, i - 1), 0.5)); // 중앙 인덱스가 0→1로 이동

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

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <카드 7장>을 커버플로우로 배치하고 한 칸 넘기는 전환을 만들어 줘. 부모 perspective 900px, 중앙 카드는 정면 scale 1, 좌우 카드는 rotateY ±45도, 거리마다 z -160px, scale 0.1씩 축소. 0.5초에 0.6초 power2.inOut으로 모든 카드가 한 칸씩 왼쪽으로 이동하고 z-index가 중앙 거리에 따라 바뀌게 해.

Use GSAP to lay out <7 cards> as a coverflow and animate a one-step shift. Parent perspective 900px, the center card faces front at scale 1, side cards rotateY +/-45 degrees, z -160px and 0.1 less scale per step of distance. At 0.5 seconds move all cards one slot left over 0.6 seconds with power2.inOut and recompute z-index by distance from center.

Codex

<파일>에 coverflow를 적용해. 카드 i의 중앙 거리 d에서 x=d*320+sign(d)*120, z=-|d|*160, rotationY=-sign(d)*45*min(1,|d|), scale=1-min(0.3,|d|*0.1)로 계산하고 position 0.5, duration 0.6, ease power2.inOut으로 한 칸 이동한다. 0.4초와 1.3초를 캡처해 중앙 카드가 바뀌고 겹침 순서가 맞는지 확인해.

Apply coverflow in <file>. For center distance d compute x=d*320+sign(d)*120, z=-|d|*160, rotationY=-sign(d)*45*min(1,|d|), scale=1-min(0.3,|d|*0.1) and tween at position 0.5, duration 0.6, ease power2.inOut for a one-slot shift. Capture 0.4s and 1.3s: the center card has changed and stacking order is correct.