글자가 차례로 등장 · Stagger

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

조회 0추천 0

직접 만든 예시

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

빈칸을 내 상황에 맞게 채워 사용하세요.

입력과 결과 비교

설명용 예시

입력 제목에 글자 애니메이션을 넣어줘.

“생각을 / 화면으로 / 옮기다”가 90ms 간격으로 차례로 등장

활용 방식을 보여주는 예시이며, 직접 실행한 결과가 아닙니다.

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

전문 용어를 활용해 mouseco가 작성한 문구입니다. 출처는 용어와 기법의 참고 문서입니다. 원출처 ↗

기존 가이드와 자세한 사용법 읽기

안녕하세요 mouseco 입니다. :)

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

막연한 요청을 구체적인 문구로

기존 요청: 제목에 글자 애니메이션을 넣어줘.

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

“생각을 / 화면으로 / 옮기다”가 90ms 간격으로 차례로 등장

예시는 위 기법을 보여주기 위해 직접 제작했습니다. 수치와 업무 상황은 가상이며 특정 모델의 성능 비교 결과가 아닙니다.

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

적용할 때 확인할 점: 숫자와 시간은 이 예시의 선택입니다. 모든 사이트에 권장되는 표준값은 아닙니다.