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 동안 스크롤 하듯 일정한 속도로 계속 움직인다.
완성
기본 예시
참고
codepen - Infinite autoplay carousel