흐르는 텍스트 구현하기
화면상에서 텍스트가 왼쪽으로 무한히 흐르는 것을 구현해보자.
호버(hover) 했을 때는 텍스트 색이 진해지면서 흐르던 것이 멈춘다.
이 구현은 생각보다 간단한데, html과 css 로만 구현이 가능하다.
일단 html 구조는 아래와 같다.
<div class="flow-container">
<div class="flow-text">
<div class="flow-wrap">Text that flows from right to left. </div>
<div class="flow-wrap">Text that flows from right to left. </div>
<div class="flow-wrap">Text that flows from right to left. </div>
<div class="flow-wrap">Text that flows from right to left. </div>
</div>
</div>
화면상에서 무한으로 흐르는 텍스트를 구현하기 위해서 해당 텍스트를 감싼 div.flow-wrap 태그를 여러개 만들었다. 물론 반복되는 텍스트의 길이에 따라 갯수가 더 추가되거나 줄어들 수 있다.
div.flow-container 는 텍스트 위아래로 공간(padding)을 주기 위해 만들었다.
div.flow-text 에 패딩을 주면 되지 않냐고 물어볼 수 있다. 저렇게 한번 더 감싼 이유는 텍스트만 호버했을때 흐르는 텍스트가 멈추게 하기 위함이다. 디자인상 텍스트 위 아래로 공간은 줘야하는데 div.flow-text에 호버를 적용하면 텍스트가 아니라 여백에 호버를 해도 텍스트가 멈춰 버리기 때문이다.
작성한 css 는 아래와 같다.
.flow-text {
display: flex;
flex: 0 0 auto;
white-space: nowrap;
overflow: hidden;
transition: 0.3s;
font-size: 2.5rem;
font-weight:bold;
color: #9D9993;
}
.flow-text:hover {
color: #000;
}
.flow-text:hover .flow-wrap {
animation-play-state: paused;
cursor: pointer;
}
.flow-wrap {
animation: textLoop 10s linear infinite;
padding-right: 1.4881vw;
}
@keyframes textLoop {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
흐르는 텍스트를 구현하기 위한 중요한 포인트는 div.flow-text 의 style 속성, 아래와 같다.
display: flex;
flex: 0 0 auto;
white-space: nowrap;
overflow: hidden;
텍스트를 가로로 나열하기 위해서 display: flex;
화면이 줄어들었을때 항목들의 사이즈가 줄어들지 않게 하기위해 flex: 0 0 auto;
텍스트가 가로로 나열되면서 밑으로 떨어지는 것을 막기위해 white-space: nowrap;
밖으로 넘치는 텍스트 때문에 가로스크롤 생기는 것을 막기위해 overflow: hidden;
그리고 애니메이션의 대상은 div.flow-wrap 들이다.
transform:translate3d(0%) 에서 transform:translate3d(-100%) 로 변화를 주었다.
왼쪽으로 흐르니 -100% 이다. 이때, translate3d 를 translateX 로 바꿔도 된다.
단, translate3d 를 사용하면 하드웨어 과속(GPU)을 이용하므로 좀 더 나은 퍼포먼스를 보여준다.
translateX 만 필요할지라도 성능 향상을 위해 translate3d를 사용하기도 한다.
간단하게 흐르는 텍스트를 구현하였다.
그런데 텍스트 길이, 화면의 너비에 따라서 div.flow-wrap의 갯수를 조절해 줘야하는것이 유지보수 측면상 좋지 않아 보인다.
고민을 해보고, 어떻게 해결하면 좋을지는 다음 포스팅에서 얘기 해보려고 한다.
Author And Source
이 문제에 관하여(흐르는 텍스트 구현하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@favorcho/흐르는-텍스트-구현하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)