애니메이션
Sticky Scroll Sections
좌측 미디어를 position:sticky로 고정하고 우측 스텝이 스크롤로 전환되며 좌측 시각이 동기화됩니다. 스크롤 오프셋 계산 없이 IntersectionObserver의 중앙 밴드 교차로 활성 스텝 인덱스를 판정하여 좌측 절차적 그라데 미디어와 진행 도트를 crossfade로 동기화합니다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/StickyScrollSections-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| steps | number | 3 | 우측 스텝(및 좌측 동기 미디어) 개수. 최소 1로 방어됩니다. |
| className | string | undefined | 루트 스크롤 컨테이너에 적용할 CSS 클래스명. |