08 / 모션 / 직접 만든 예시

글자가 차례로 등장 · Stagger

글자가 차례로 나타나도록 문자나 단어를 나누고 각 애니메이션의 시작 시간을 조금씩 늦추는 기법

가상 자료로 만든 동작·문서 예시 · 버튼으로 재생해보세요

이렇게 말해보세요

[헤드라인]을 단어별 split text로 나누고 90ms 간격의 stagger로 아래에서 12px 올라오며 나타나게 해줘. 스크린리더에는 원문을 한 번만 읽히고 모션 감소 시 즉시 표시해줘.

왜 이 용어인가요

한꺼번에 나타나는 제목과 순서대로 읽히는 제목의 차이를 짧게 전달합니다. 애니메이션의 간격과 이동량까지 지정해 과한 효과를 줄입니다.

숫자와 시간은 이 예시의 선택입니다. 모든 사이트에 권장되는 표준값은 아닙니다.

용어 참고 문서 ↗