바 내부에 텍스트를 무한하게 흐르는 효과를 내고 싶다면 key frame을 사용하면 된다.
1. HTML 세팅
컨테이너 역할을 할 div를 만들고, 그 안에 p태그로 흐를 텍스트를 준비한다.
이때 텍스트는 어느정도 길게 만들어야 애니메이션을 적용할때 끊이지 않고, 무한으로 흐르는 것처럼 보인다.
<div class="container">
<p>SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦</p>
</div>
2. 기본 CSS 세팅
먼저 흐르는 텍스트를 담을 container 박스에는 아래와 같은 세팅이 필요하다.
- white-space: nowrap; 내부에 담기는 텍스트가 줄바꿈 없이 한 줄로 표시되도록 함
- box-sizing: border-box; 보더나 패딩에 따라 내부 컨텐츠 크기가 변경되지 않고 유지되게 함
- overflow: hidden; 박스를 넘어가는 텍스트를 숨긴다.
텍스트는 p태그로 구성되어 있으므로 display: inline-block을 세팅해줘야한다.
p태그는 인라인 태그이기에 움직이는 에니메이션을 그대로 적용시키면 제대로 적용이 안될 수도 있다.
.container{
white-space: nowrap;
box-sizing: border-box;
overflow: hidden;
}
p{
display: inline-block;
}
3. 애니메이션 적용
이제 키프레임을 만들고, p태그에 적용하기만 하면 된다.
x축으로 텍스트가 움직이므로, translateX를 사용한다.
이때 -100%를 사용하지 않고 -50%를 사용해 텍스트가 도중에 끊이지 않게 한다.
애니메이션 시간을 줄이면 텍스트가 더 빠르게 흐른다.
텍스트가 흐르는 방향을 바꾸고 싶다면 translateX 값을 거꾸로 하면 된다.
p{
display: inline-block;
animation: text-to-right 20s linear infinite;
}
/*왼쪽에서 오른쪽으로 텍스트가 흐르는 애니메이션*/
@keyframes text-to-right {
0% {
transform: translateX(-50%);
}
100% {
transform: translateX(0%);
}
}
/*오른쪽에서 왼쪽으로 텍스트가 흐르는 애니메이션*/
@keyframes text-to-left {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}
예시
See the Pen text-flow by 김다영 (@xnpzlttb-the-solid) on CodePen.
