스크롤 기반 애니메이션

기본

아래로 스크롤하면 요소가 나타납니다.

animation-timeline scroll()

데모 보기

역방향 (한계)

CSS는 스크롤 방향을 감지하지 못합니다. 한계와 JS 대안을 함께 봅니다.

animation-direction 한계

데모 보기

접근성

모션 감소 설정을 존중합니다. 다만 CSS만으로는 콘텐츠를 고정할 수 없습니다.

prefers-reduced-motion a11y

데모 보기

폴백

scroll-timeline 미지원 브라우저를 위한 JS 폴백입니다.

CSS.supports() 점진적 향상

데모 보기

기본

요소가 뷰포트에 들어오면 나타나고, 벗어나면 원래대로 돌아갑니다.

IntersectionObserver threshold

데모 보기

양방향

뷰포트 진입 시 애니메이션, 이탈 시 리셋. 스크롤 방향도 표시합니다.

IO toggle 양방향

데모 보기

접근성

unobserve()로 한 번만 공개하고 그대로 유지합니다.

unobserve a11y

데모 보기

기본

프레임 단위로 계산해 완전히 제어하는 애니메이션입니다.

requestAnimationFrame scroll

데모 보기

양방향

뷰포트 진입·이탈에 맞춰 프레임 단위로 부드럽게 움직입니다.

rAF toggle 양방향

데모 보기

접근성

임계값에 도달하면 요소를 고정해 다시 사라지지 않습니다.

임계값 고정 a11y

데모 보기