[꿀팁] 자동 롤링 배너 만드는 법 [자바스크립트로 무한 롤링 배너 구현하기]

- 자동 롤링 배너 만드는 법

무한 롤링 배너는 원본배너와 복제배너를 한 방향으로 이동시켜주면서 배너 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

- 자동 롤링 배너 만드는 법

- 참고자료

티스토리툴바