[CSS] 가로 방향으로 흐르는 텍스트 만들기

그리드 사용해서 레이아웃 잡기 연습 겸 웹사이트 화면 클론코딩하다가

무한으로 반복해서 한 방향으로 흐르는 텍스트 스타일을 구현해보고 싶어서 도전!

 

그리드랑 SCSS 공부한 것도 블로그에 정리해야 되는데 다 건너뛰고 이걸 먼저 쓰고 있네.. 언제 다 정리하지😥

 

생각보다 아주 많이 간단함 주의

 

.top, .bottom{
  display: flex;
  white-space: nowrap;  /* 텍스트는 뉴라인으로 넘어가지 않게 한 줄로 */
  overflow: hidden;     /* width를 넘어가는 텍스트는 보이지 않게 숨김 */
}

먼저 텍스트를 담을 부모 box에 필요한 속성을 설정해준다.

 

@keyframes textLoopLeft {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-50%);
    }
  }

@keyframes textLoopRight {
    0% {
      transform: translateX(-50%);
    }
    100% {
      transform: translateX(0%);
    }
  }

다음으로 `transform` 속성의 `translateX`를 이용해서 가로 방향으로 이동하는 애니메이션 만들어주기!

 

왼쪽으로 흐르는 텍스트는 현재 위치에서 왼쪽으로 50% 만큼,

오른쪽으로 흐르는 텍스트는 왼쪽 화면 너머에서 시작해서 오른쪽으로 움직이도록 설정한다.

 

.top .flowtext{
  animation: textLoopLeft 30s linear infinite;
}

.bottom .flowtext{
  animation: textLoopRight 30s linear infinite;
}

마지막으로 텍스트에 애니메이션을 `infinite`하게 주면 완성~

 

애니메이션이 끝나고 다시 반복해서 시작하는 순간에 약간의 끊김이 보이지만 잘 굴러가는 모습을 볼 수 있다.

(혹시나 움짤이 갑자기 지지직거린다면 그건 그냥 gif 파일의 문제..)

 

 

근데 다 만들고 보니 HTML에 텍스트 스크롤 태그가 있네?..

<marquee>: The Marquee element - HTML: HyperText Markup Language | MDN

 

헐

난 바보인가

 

 

재밌는 태그인데 공식문서 찾아보니 marquee element는 웹 표준에 맞지 않아 사용을 권장하지 않는다고 하는군요

음.. 더 좋은 방법이 없다면 그냥 애니메이션으로 만들어서 쓰도록 하자!