728x90
- 자동 롤링 배너 만드는 법
무한 롤링 배너는 원본배너와 복제배너를 한 방향으로 이동시켜주면서 배너 2개가 번갈아가며 뷰포트에 나타나는 형식으로 실제 화면상에서 보이는 동작은 하나의 배너가 무한 롤링하는 것처럼 보이게 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
border: 1px solid;
display: flex;
overflow: hidden;
}
.wrap .rolling-list ul {
padding : 0px;
display: flex;
}
.wrap .rolling-list ul li {
box-sizing: border-box;
display: flex;
align-items: center;
flex-shrink: 0;
}
.rolling-list.original {
animation: rollingleft1 90s linear infinite;
}
.rolling-list.clone {
animation: rollingleft2 90s linear infinite;
}
@keyframes rollingleft1 {
0% { transform: translateX(0); }
50% { transform: translateX(-100%); }
50.01% { transform: translateX(100%); }
100% { transform: translateX(0); }
}
@keyframes rollingleft2 {
0% { transition: translateX(0); }
100% { transform: translateX(-200%); }
}
</style>
</head>
<body>
<div class="wrap"> <!-- 배너표시영역 -->
<div class="rolling-list"> <!-- 원본배너 -->
<ul>
<li>
<div class="image-wrap"><img src="https://images.unsplash.com/photo-1471922694854-ff1b63b20054?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200" alt=""></div>
</li>
<li>
<div class="image-wrap"><img src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200" alt=""></div>
</li>
<li>
<div class="image-wrap"><img src="https://images.unsplash.com/photo-1501493870936-9c2e41625521?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200" alt=""></div>
</li>
<li>
<div class="image-wrap"><img src="https://images.unsplash.com/photo-1611832197549-ff910be125dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200" alt=""></div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
// 롤링 배너 복제본 생성
let roller = document.querySelector('.rolling-list');
roller.id = 'roller1'; // 아이디 부여
let clone = roller.cloneNode(true)
// cloneNode : 노드 복제. 기본값은 false. 자식 노드까지 복제를 원하면 true 사용
clone.id = 'roller2';
document.querySelector('.wrap').appendChild(clone); // wrap 하위 자식으로 부착
document.querySelector('#roller1').style.left = '0px';
document.querySelector('#roller2').style.left = document.querySelector('.rolling-list ul').offsetWidth + 'px';
// offsetWidth : 요소의 크기 확인(margin을 제외한 padding값, border값까지 계산한 값)
roller.classList.add('original');
clone.classList.add('clone');
</script>
</body>
</html>- 참고자료
[Javascript] 자동 롤링 배너를 만들어보자!
빙글빙글 돌아가는 내 인생과 롤링 배너💫
velog.io
728x90