사용법
이미지 영역이 스크롤 진입 시 마스크와 확대 효과로 드러나요.
인터페이스
ScrollImageRevealProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| direction | "left" | "right" | "up" | "down" | left | 등장 방향 |
| duration | number | 900 | 전환 길이(ms) |
| delay | number | 0 | 시작 지연(ms) |
| scale | number | 1.08 | 초기 이미지 배율 |
| triggerOnce | boolean | true | 한 번만 재생 |
| className | string | — | 루트 클래스 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수 |
ScrollImageReveal 컴포넌트 Props 표
가져오기
모션 CSS는 @goldtreedev/ui/motion.css를 함께 import해요.
@import "@goldtreedev/ui/motion.css";
import { ScrollImageReveal } from "@goldtreedev/ui";