컴포넌트
Sticky Reveal
좌측 미디어를 sticky로 고정하고, 우측 스텝이 스크롤에 따라 전환됩니다. IntersectionObserver로 화면 중앙 밴드에 들어온 스텝을 활성으로 판정해 좌측 미디어의 그라디언트와 번호를 크로스페이드합니다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/StickyReveal-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| steps | number | 3 | 우측 스텝(콘텐츠) 개수 (1~5로 클램프). |
| className | string | undefined | 루트 요소에 적용할 추가 className. |