News Ticker(transition)

Namiya·2025년 7월 10일
JavaScriptPractice

JavaScript 연습

목록 보기
19/27
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta name="viewport" content="width=device-width">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css">
    <title>News Ticker</title>
    <style>

        #newsTicker {
            width: 500px;
            /* #newsTicker 요소의 높이는 <li> 요소의 높이와 같아야 한다. */
            height: 3em;
            border: 10px solid yellowgreen;
            margin: 100px auto;
           
            /* #newsTicker 요소의 영역을 벗어난 <li> 요소들을 숨긴다. */
            overflow: hidden;
        }

        #newsTicker > ul > li {
            margin-left: 1em;

            line-height: 3;
            /* line-height: 3em; */
            font-weight: bold;

            /*
             * 뉴스 티커 기능에서 <li> 요소는 반드시 한 줄로 표시되어야 하므로,
             * 내부 텍스트가 개행되지 않도록 한다.
             */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    </style>
</head>
<body>

    <div id="newsTicker">
        <ul>
            <li>1. Time is gold.</li>
            <li>2. No sweat, no sweet.</li>
            <li>3. Asking costs nothing.</li>
            <li>4. Step by step goes a long way.</li>
            <li>5. You will never know until you try.</li>
        </ul>
    </div>

    <script>

        // 뉴스 티커 기능에서 표시되는 항목이 바뀌는 간격
        var INTERVAL = 2000;
        var DURATION = 1000; 

        // 프로그램에서 참조하는 요소를 미리 탐색
        var newsList = document.querySelector('#newsTicker > ul');

        // 1. 일정한 시간마다
        window.setInterval(function () {
            // 2. <ul> 요소를 #newsTicker 요소의 높이만큼 위로 이동한다.
            newsList.style.transitionDuration = DURATION + 'ms';
            newsList.style.marginTop = '-3em';

            // 3. <ul> 요소의 움직임이 끝나면
            // → transition-duration 스타일 속성에 지정한 시간이 지나면,
            //   즉, 1000ms가 지나면, 아래 문장들이 실행되도록 한다.
            window.setTimeout(function () {
                // <ul> 요소의 첫 번째 자식 요소를 <ul> 요소의 마지막으로 옮긴다.
                newsList.append(newsList.firstElementChild);

                // <ul> 요소에 설정했던 스타일 속성들을 제거한다.
                // newsList.style.transitionDuration = '';
                // newsList.style.marginTop = null;
                newsList.removeAttribute('style');
            }, DURATION);
        }, INTERVAL)

    </script>

</body>
</html>

profile
Namiya
이전 포스트

News Ticker(Basic)

다음 포스트

Classic Event Model

0개의 댓글