css와 js를 이용한 자동 롤링 슬라이드 배너

안녕하세요 찐망고입니다.

자동롤링 관련 포스팅을 세 개째 하네요?

나는 플러그인을 쓰지 않고 작업하고 싶다 하는 분들은 이 포스팅을 보시오!

 

세이브더칠드런 지구기후팬클럽

텍스트 자동롤링

 

 

 

텍스트가 각자 반대방향으로 자동 롤링 되고 있는데요..

저는 그냥 한 방향으로만 만들어 보도록 하겠습니다.

작업방법은 어렵지 않아요.

js로 해당요소를 복제해서 각각 아이디를 부여하고 위치를 잡아주고

css로 애니메이션을 만들어주면 끝ㅌ트트트트틑

 

<div id="wrap">
    <div class="wrap-box">
        <div class="rolling-list">
            <div class="list">LET’S EARTHEMBLE</div>
            <div class="list">LET’S EARTHEMBLE</div>
            <div class="list">LET’S EARTHEMBLE</div>
        </div>
    </div>
</div>

 

#wrap {
    width: 100%;
    height: 600px;
    overflow: hidden;
    background-color: lightskyblue;
}
.wrap-box {
    display: flex;
    width: 120%;
    overflow: hidden;
    background-color: tomato;
    transform: translate(-60px) rotate(-10deg);
}
.wrap-box:nth-child(2) {
    background-color: antiquewhite;
}
.rolling-list {
    display: flex;
    flex-shrink: 0;
}
.list {
    margin: 0 6px;
    font-size: 200px;
    color: transparent;
    -webkit-text-stroke: #246dae 2px;
}

 

let roller = document.querySelector('.rolling-list');
roller.id = 'roller1'; // 아이디부여

let clone = roller.cloneNode(true)
// 기본값은 false. 자식 노드까지 복제 할 경우 true
clone.id = 'roller2';
document.querySelector('.wrap-box').appendChild(clone);

//document.querySelector('#roller1').style.left = '0px';
//document.querySelector('#roller2').style.left = document.querySelector('.rolling-list').offsetWidth + 'px';
// offsetWidth는 요소의 너비를 픽셀 단위로 반환
// 요소의 내부 너비, 패딩, 테두리, 수직스크롤바의 너비를 모두 포함
// 부모요소에 flex를 주면 굳이 줄 필요 없음

roller.classList.add('original');
clone.classList.add('clone');

 

js에서는 요소를 복제하여 복제전 요소옆으로 위치를 맞출 건데요.

. wrap-box에 display: flex를 주는 이유이기도 하죠.

@keyframes rolling1 {
	0% { transform: translateX(0); }
	50% { transform: translateX(-100%); }
	50.01% { transform: translateX(100%); }
	100% { transform: translateX(0); }
}
@keyframes rolling2 {
	0% { transform: translateX(0); }
	100% { transform: translateX(-200%); }
}

.rolling-list.original {
	animation: rolling1 10s linear infinite;
}
.rolling-list.clone {
	animation: rolling2 10s linear infinite;
}

 

원본 요소와 복제된 요소의 시작위치가 다르므로 애니메이션을 두 개 설정하여

이동 좌표를 각각 설정합니다.

애니메이션이 반쯤 진행될 때 배너가 가려져서 안 보이게 되는 위치만큼 이동한 후,

50.01% 시점에 뷰포트 너머의 오른쪽 위치로 이동시켜 줍니다.

애니메이션 설명

 

 

아래 코드에서 확인해 볼까요~

 

See the Pen JS무한롤링 by 찐망고 (@nnwbliyz-the-styleful) on CodePen.