티스토리 뷰

WEB/JavaScript

글자 롤링 배너

silverline79 2026. 3. 19. 08:27 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>무한 텍스트 롤링 배너</title>
    <style>
        /* 1. 레이아웃 초기화 및 기본 스타일 */
        body { font-family: 'Pretendard', sans-serif; padding: 50px; background-color: #f0f2f5; }
        ul { list-style: none; margin: 0; padding: 0; }

        /* 2. 배너 컨테이너 */
        .banner-wrapper {
            width: 100%;
            max-width: 900px;
            margin: 0 auto;
            background: #1a1a1b;
            color: #ffffff;
            overflow: hidden; /* 넘치는 텍스트 숨김 */
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            position: relative;
        }

        /* 3. 흐르는 콘텐츠 영역 */
        .rolling-list {
            display: flex;
            width: fit-content;
            padding: 15px 0;
            cursor: pointer;
        }

        .roller {
            display: flex;
            align-items: center;
        }

        .roller li {
            padding: 0 40px;
            white-space: nowrap;
            font-size: 16px;
            font-weight: 500;
            display: flex;
            align-items: center;
        }

        /* 아이템 사이 구분 점 */
        .roller li::after {
            content: "•";
            margin-left: 80px;
            color: #555;
        }

        /* 4. 애니메이션 설정 */
        .animate {
            /* 20s는 속도입니다. 숫자가 커질수록 느려집니다. */
            animation: scroll-left 20s linear infinite;
        }

        /* 마우스 오버 시 멈춤 효과 */
        .banner-wrapper:hover .animate {
            animation-play-state: paused;
        }

        @keyframes scroll-left {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); } /* 복제본 덕분에 끊김없이 연결됨 */
        }

        /* 5. 컨트롤 버튼 영역 */
        .controls {
            margin-top: 20px;
            text-align: center;
            display: flex;
            justify-content: center;
            gap: 10px;
        }

        button {
            padding: 8px 16px;
            border: none;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
        }

        button:hover { background: #eee; }
        
        .reverse-mode { animation-direction: reverse !important; }
    </style>
</head>
<body>

<div class="banner-wrapper">
    <div class="rolling-list id="rollingList">
        <ul class="roller">
            <li>🚀 2024년 신규 프로젝트 오픈 안내</li>
            <li>🔥 실시간 인기 검색어 1위: 생성형 AI</li>
            <li>📢 이번 주 금요일 정기 점검 예정 (02:00 ~ 04:00)</li>
            <li>🎁 친구 초대하고 포인트 100% 받기</li>
        </ul>
    </div>
</div>

<div class="controls">
    <button id="prevBtn">◀ 역방향</button>
    <button id="toggleBtn">정지</button>
    <button id="nextBtn">정방향 ▶</button>
</div>

<script>
    const rollingList = document.querySelector('.rolling-list');
    const roller = document.querySelector('.roller');
    const toggleBtn = document.getElementById('toggleBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    // 1. 무한 루프를 위해 콘텐츠 복제
    const clone = roller.cloneNode(true);
    rollingList.appendChild(clone);
    rollingList.classList.add('animate');

    // 2. 재생/정지 버튼 기능
    let isRunning = true;
    toggleBtn.addEventListener('click', () => {
        if (isRunning) {
            rollingList.style.animationPlayState = 'paused';
            toggleBtn.textContent = '재생';
        } else {
            rollingList.style.animationPlayState = 'running';
            toggleBtn.textContent = '정지';
        }
        isRunning = !isRunning;
    });

    // 3. 방향 제어 기능
    prevBtn.addEventListener('click', () => {
        rollingList.classList.add('reverse-mode');
    });

    nextBtn.addEventListener('click', () => {
        rollingList.classList.remove('reverse-mode');
    });
</script>

</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>무한 텍스트 롤링 배너 (호환 버전)</title>
    <style>
        body { font-family: 'dotum', sans-serif; padding: 50px; background-color: #f0f2f5; }
        ul { list-style: none; margin: 0; padding: 0; }

        .banner-wrapper {
            width: 100%;
            max-width: 900px;
            margin: 0 auto;
            background: #1a1a1b;
            color: #ffffff;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            position: relative;
        }

        .rolling-list {
            display: flex;
            width: fit-content;
            padding: 15px 0;
            cursor: pointer;
        }

        .roller {
            display: flex;
            align-items: center;
        }

        .roller li {
            padding: 0 40px;
            white-space: nowrap;
            font-size: 16px;
            font-weight: 500;
        }

        /* 애니메이션 설정 */
        .animate {
            animation: scroll-left 20s linear infinite;
        }

        /* 마우스 오버 시 멈춤 */
        .banner-wrapper:hover .animate {
            animation-play-state: paused;
        }

        @keyframes scroll-left {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        .controls {
            margin-top: 20px;
            text-align: center;
        }

        button {
            padding: 8px 16px;
            border: 1px solid #ccc;
            background: #fff;
            cursor: pointer;
            margin: 0 5px;
        }
        
        .reverse-mode { animation-direction: reverse !important; }
    </style>
</head>
<body>

<div class="banner-wrapper">
    <div class="rolling-list" id="rollingList">
        <ul class="roller">
            <li>🚀 2024년 신규 프로젝트 오픈 안내</li>
            <li>🔥 실시간 인기 검색어 1위: 생성형 AI</li>
            <li>📢 이번 주 금요일 정기 점검 예정 (02:00 ~ 04:00)</li>
            <li>🎁 친구 초대하고 포인트 100% 받기</li>
        </ul>
    </div>
</div>

<div class="controls">
    <button id="prevBtn">◀ 역방향</button>
    <button id="toggleBtn">정지</button>
    <button id="nextBtn">정방향 ▶</button>
</div>

<script>
    // 변수 선언을 var로 변경하여 구형 엔진 대응
    var rollingList = document.getElementById('rollingList');
    var roller = rollingList.querySelector('.roller');
    var toggleBtn = document.getElementById('toggleBtn');
    var prevBtn = document.getElementById('prevBtn');
    var nextBtn = document.getElementById('nextBtn');

    // 1. 콘텐츠 복제 (무한 루프용)
    var clone = roller.cloneNode(true);
    rollingList.appendChild(clone);
    rollingList.className += ' animate';

    var isRunning = true;

    // 2. 재생/정지 버튼 (일반 함수로 변경)
    toggleBtn.addEventListener('click', function() {
        if (isRunning) {
            rollingList.style.animationPlayState = 'paused';
            toggleBtn.innerHTML = '재생';
        } else {
            rollingList.style.animationPlayState = 'running';
            toggleBtn.innerHTML = '정지';
        }
        isRunning = !isRunning;
    });

    // 3. 역방향 버튼 (일반 함수로 변경)
    prevBtn.addEventListener('click', function() {
        rollingList.className = 'rolling-list animate reverse-mode';
    });

    // 4. 정방향 버튼 (일반 함수로 변경)
    nextBtn.addEventListener('click', function() {
        rollingList.className = 'rolling-list animate';
    });
</script>

</body>
</html>

 

 

글자 롤링 배너.html
0.00MB

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.

'WEB > JavaScript' 카테고리의 다른 글

전단계 결재자 포함 조직도  (0) 2026.03.05
결재팝업 결재자 체크 선택 펼침 포함  (0) 2026.03.05
결재선 지정 선택 팝업  (0) 2026.03.05
6주 카테고리 달력  (0) 2026.03.04
카테고리 기능이 추가된 달력 스크립트 (년/월 이동 + 오늘 일정 자동 표시)  (0) 2026.03.03
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/03   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함