애니메이션
Aperture Expand
핀(sticky) 고정 구간에서 작은 미디어 카드가 '창이 열리듯' 풀블리드까지 확대되는 스크롤 스크럽 효과입니다. scale 변환 대신 clip-path inset · border-radius · 컨테이너 aspect-ratio를 동시에 보간하므로 미디어가 늘어나거나 뿌옇게 되지 않습니다(내부 격자선이 끝까지 1px 유지되어 무확대가 눈으로 확인됩니다). 헤드라인은 좌/우 두 덩어리로 갈라져 서로 반대 방향으로 다른 속도·다른 페이드 배속으로 빠져나가고, 그 사이의 브랜드 그라데이션 비네트는 투명도 0까지 빠집니다. 구동은 CSS animation-timeline: view()가 1순위이고 미지원 브라우저에서만 passive 스크롤 + rAF로 폴백하며, 휠을 가로채지 않아 네이티브 스크롤 속도가 그대로 유지됩니다. 진행률 0~1은 --vk-ap-progress CSS 변수로 노출되어 진행 바 같은 자식 요소가 그대로 구독합니다.
- 분류
- 애니메이션
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ApertureExpand-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| pinLength | number | 1.8 | 핀 고정 구간의 길이(스테이지 높이의 배수). 클수록 창이 더 천천히 열립니다(0.3~8로 제한). |
| startWidth | number | 34 | 시작 시점 창의 가로 폭. 스테이지 폭 대비 %(6~98로 제한). |
| startRatio | number | 1.78 | 시작 시점 창의 가로세로비(w/h). 진행에 따라 스테이지 비율까지 보간됩니다(0.35~5로 제한). |
| startRadius | number | 22 | 시작 시점 창의 모서리 반경(px). 풀블리드 도달 시 0으로 보간됩니다(0~96으로 제한). |
| headlineShift | number | 150 | 헤드라인 좌/우 덩어리가 서로 반대 방향으로 밀려나는 최대 거리(px). 좌우 이동 속도가 달라 시차가 생깁니다(0~600으로 제한). |
| showProgressBar | boolean | true | 진행률 HUD(PINNED 라벨 + 진행 바 + FULL BLEED 배지) 표시 여부. 진행률 CSS 변수 구독 예시입니다. |
| className | string | undefined | 루트 스크롤 컨테이너에 적용할 CSS 클래스명. |