시선을 끄는 세로형 텍스트 롤링 애니메이션
CSS 26.05.26 조회 14시선을 끄는 세로형 텍스트 롤링 애니메이션
텍스트가 세로 방향으로 부드럽게 롤링되며, 한 줄씩 강조되는 인터랙션 애니메이션을 구현했습니다.
짧은 문구도 더욱 눈에 띄게 전달할 수 있어 메인 비주얼이나 브랜드 키워드 영역에서 활용하기 좋은 모션입니다.
➰➰➰
✅ 텍스트 롤링 애니메이션이란?
텍스트가 세로 방향으로 순차 변경되며 현재 문구를 강조하는 인터랙션 모션입니다.
한 번에 많은 정보를 보여주기보다 핵심 문구를 자연스럽게 강조할 수 있어, 다양한 인터랙션 UI에서 자주 활용됩니다.
정적인 텍스트 영역에 흐름을 더해 보다 생동감 있는 화면을 만들고자 했으며, 사용자의 시선이 자연스럽게 이어질 수 있도록 구성했습니다.
✨ 텍스트 롤링 애니메이션 활용 예시
· 인기 검색어 UI
· 실시간 키워드
· 브랜드 슬로건 강조
· 서비스 핵심 문구 노출
· 이벤트 메시지 롤링
· 메인 배너 인터랙션
✅ 이렇게 구현했어요!
강조되는 텍스트에 폰트 크기 위계를 주어 시선이 자연스럽게 머물 수 있는 구조입니다.
하지만 반응형 환경에서는 폰트 크기와 행간이 함께 변경되기 때문에, 슬라이드 높이가 고정된 구조에서는 간격이 과하게 벌어지는 현상이 발생합니다.
이를 해결하기 위해 각 텍스트의 실제 높이를 offsetHeight로 계산해 이동값과 컨테이너 높이를 유동적으로 처리했습니다.
Swiper로도 충분히 구현 가능한 모션이지만, 텍스트 크기 변화에 따른 간격 문제를 보다 자연스럽게 대응하기 위해 Vanilla JavaScript로 직접 구현했습니다.
✨ 구현 포인트
· translateY 기반의 세로 롤링 방식
· 일정 간격마다 텍스트 자동 변경
· 현재 텍스트만 active 클래스로 강조
· 폰트 크기 변화에 맞춘 동적 높이 계산
· 무한 반복이 가능한 롤링 구조
· 반응형에서도 자연스럽게 이어지는 간격 처리
✅ 강조 텍스트 스타일 구성
현재 활성화된 텍스트에만 스타일 변화를 주어 자연스럽게 시선이 집중될 수 있도록 구성했습니다.
짧은 텍스트 변화만으로도 화면 분위기를 더욱 생동감 있게 만들 수 있어 인터랙션 요소로 활용하기 좋은 모션입니다.
✨ 스타일 구성 예시
· 활성 텍스트만 폰트 크기 확대
· opacity 차이로 시선 집중
· font-weight 변화로 강조 효과 구성
✅ 사용자 경험(UX) 측면에서의 장점
· 핵심 문구를 자연스럽게 강조 가능
· 제한된 공간 안에서 여러 메시지 전달 가능
· 정적인 화면에 리듬감 추가
· 사용자의 시선을 자연스럽게 유도 가능
· 세로형 텍스트 롤링 애니메이션은 단순한 텍스트 영역에도 흐름과 집중도를 더할 수 있어 다양한 인터랙션 UI에서 활용하기 좋은 모션입니다.
See the Pen 세로형 슬라이드 (바닐라JS) by designkits (@designkits) on CodePen.
➰➰➰
작은 텍스트 변화만으로도 화면의 분위기와 정보 전달력을 함께 높일 수 있습니다.
디자인키트와 함께 홈페이지에 자연스러운 변화를 더해보세요!
