흐르는 텍스트 구현하기

화면상에서 텍스트가 왼쪽으로 무한히 흐르는 것을 구현해보자.

호버(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의 갯수를 조절해 줘야하는것이 유지보수 측면상 좋지 않아 보인다.

고민을 해보고, 어떻게 해결하면 좋을지는 다음 포스팅에서 얘기 해보려고 한다.