스크롤 텍스트 생성기

가로 또는 세로로 움직이는 텍스트를 만들고 애니메이션을 미리 본 뒤 복사 가능한 HTML/CSS를 내보냅니다.

텍스트 및 설정
방향
출력
입력 또는 예시를 기다리는 중입니다.
미리보기
미리보기를 사용할 수 없어도 아래 HTML/CSS를 복사할 수 있습니다.
텍스트 줄 수
0
반복 주기(초)
0
글자 크기
0
안쪽 여백
0

자세히 알아보기

사용 방법

텍스트를 입력하고 방향과 스타일을 선택한 뒤 움직임을 미리 보고 HTML/CSS를 복사하거나 다운로드하세요.

원리와 범위

텍스트를 미리보기에 넣기 전에 이스케이프하고, 내보낸 CSS는 translateX 또는 translateY와 prefers-reduced-motion 대체 동작을 사용합니다.

자주 묻는 질문
텍스트를 더 빠르게 움직이려면 어떻게 하나요?

반복 시간을 줄이세요. 반복 시간은 한 번 이동하는 데 걸리는 초입니다.

여러 줄을 세로로 움직일 수 있나요?

네. 위 또는 아래를 선택하면 여러 줄이 하나의 콘텐츠 블록으로 함께 움직입니다.

동작 감소 설정을 켜면 어떻게 되나요?

미리보기와 내보낸 코드에 prefers-reduced-motion 대체 동작이 포함되어 요청 시 지속적인 움직임을 멈춥니다.

개인정보 보호 및 참고 자료

텍스트는 이 브라우저에서 처리되며 업로드되지 않습니다.

스크롤 텍스트를 중요한 정보의 유일한 표현 방식으로 사용하지 마세요. 정적 대체 콘텐츠를 제공하고 동작 감소 설정을 존중해야 합니다.

MDN: 브라우저 텍스트 및 애니메이션 API