텍스트 애니메이션
Scroll Float Text
IntersectionObserver로 가시 여부만 감지하고, 보이는 동안 requestAnimationFrame으로 매 프레임 요소 위치를 다시 읽어 스크롤 진행도(0~1)를 산출합니다. 이 단일 스칼라를 글자 인덱스별 임계 구간에 매핑해 opacity·translateY·blur를 실시간 보간하며, 스크롤을 멈추면 그 위치에 고정되는 스크럽 방식으로 글자들이 순차적으로 떠오르며 등장합니다.
- 분류
- 텍스트 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ScrollFloatText-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| text | string | "스크롤하면 떠오릅니다" | 떠오르며 등장할 원문 텍스트. |
| spread | number | 0.6 | 글자별 등장 지연 계수(0~1). 클수록 뒷 글자가 늦게 완성됩니다. |
| lift | number | 40 | 최대 상승 오프셋(px). 진행도 0에서 아래로 밀린 정도. |
| maxBlur | number | 10 | 최대 블러 강도(px). 진행도 0에서 가장 흐립니다. |
| className | string | undefined | 추가 CSS 클래스. |