임계값 고정
가시성이 100%에 도달하면 그 요소의 갱신을 멈춥니다.
접근성을 지킨 rAF
한 번 열린 커버는 영구적으로 그 상태를 유지합니다.
아래로 스크롤
한 번만 재생되는 공개 애니메이션입니다.
접근성 특징
카드가 처음 나타난 뒤로는 계속 보입니다.
배터리 절약
고정된 요소는 더 이상 계산하지 않아 CPU를 아낍니다.
모션에 안전
모션 감소를 선호하면 애니메이션 없이 즉시 보여줍니다.
성능
카운터가 목표 값에서 멈춰 고정됩니다.
?
고정 후 CPU
0%
접근 가능
0
깜빡임 횟수
접근성 구현
- 임계값에 도달한 요소를 따로 기록해 둡니다
.is-locked클래스로 상태를 얼립니다- 고정된 요소는 계산에서 건너뜁니다
prefers-reduced-motion을 가장 먼저 확인합니다
성능 이득
- 스크롤이 진행될수록 DOM 갱신이 줄어듭니다
- 이미 보이는 콘텐츠는 다시 계산하지 않습니다
- 끝에는 돌아가는 애니메이션이 하나도 남지 않습니다
- 모바일 배터리에 유리합니다
권장 사항
- 모션 설정을 항상 먼저 확인하기
- 즉시 보여주는 폴백 제공하기
- 시맨틱 HTML 쓰기
- 스크린 리더로 확인하기