여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. 지속적으로 흘러가는 글자 만들기
지속적으로 흘러가는 글자 만들기
2개월전 작성
2개월전 수정

TV를 보면 오른쪽에서 왼쪽으로 뉴스나 광고 문구 등이 계속 움직일 때가 있다.

그런 효과를 HTML과 CSS로 어떻게 표현하는지 방법을 알아보자.

지속적으로 흐르는 글자

Codepen에서 찾은 코드를 뜯어보자.

HTML
CSS
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}
.slider {
  background: white;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 960px;
}
.slider::before, .slider::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.slider::before {
  left: 0;
  top: 0;
}
.slider .slide-track {
  animation: scroll 40s linear infinite;
  display: flex;
  width: calc(250px * 14);
}
.slider .slide {
  height: 100px;
  width: 250px;
}
사용된 코드 설명
0% { transform: translateX(0); }
:
움직임이 시작되는 기준점을 정한다.
100% { transform: translateX(calc(-250px * 7)); }
:
100% 다 움직이면 얼마나 이동할건지 지정한다.
overflow: hidden;
:
넘치는 글자는 가린다.
background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
:
글의 움직임이 시작되는 지점과 종료되는 지점에 흰색으로 그라디언트를 만든다.
animation: scroll 40s linear infinite;
:
40s 동안 스크롤 하듯 일정한 속도로 계속 움직인다.

완성

기본 예시

참고
Mingg`s Diary
밍구
공부 목적 블로그