애니메이션
Parallax Layers
마우스 움직임에 따라 카드 내부 레이어들이 깊이(depth)별로 다르게 이동하는 패럴랙스 카드. 각 레이어는 0~1 depth 값을 가지며 커서의 정규화 오프셋에 depth·strength를 곱해 translate3d로 이동한다. depth가 클수록 앞쪽 레이어로 더 크게 움직여 원근감을 만든다. pointermove로 목표값을 갱신하고 requestAnimationFrame lerp로 부드럽게 따라가며, 루프는 목표에 도달하면 자동으로 멈춰 프레임을 아낀다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ParallaxLayers-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| layers | ParallaxLayer[] | 브랜드 데모 레이어 | 깊이별 레이어 목록(뒤→앞 순서 권장). 각 레이어는 content·depth(0~1)·className·style을 가진다. 미지정 시 브랜드 기본 레이어 사용. |
| strength | number | 26 | 최대 이동 거리(px). depth=1 레이어가 커서를 카드 끝까지 옮겼을 때의 이동 폭 기준값. |
| invert | boolean | false | true면 레이어를 커서 반대 방향으로 이동시킨다. |
| smoothing | number | 0.12 | lerp 보간 계수(0~1). 클수록 즉각 반응, 작을수록 부드럽게 지연. |
| resetOnLeave | boolean | true | 커서가 벗어났을 때 모든 레이어를 중앙(0,0)으로 복귀시킬지 여부. |
| className | string | "" | 카드 래퍼에 적용할 추가 클래스. |
| style | CSSProperties | undefined | 카드 래퍼 스타일 오버라이드. |
| ariaLabel | string | undefined | 접근성 라벨. 지정 시 카드에 role="img"과 aria-label을 부여한다. |