[CI4] TEXT 자동 전환. 텍스트 롤링, text rolling

회사에서 급하게 Text 문구가 있는 곳을 스크롤링 되도록 해야하는데, 이걸 어떻게 구현하나 찾고 있었다.

검색한 내용으로 "자동 회전 html, html carousel, html 태그 자동으로 scroll, auto scroll html, auto scroll fadeup"로 찾던 중 텍스트 롤링이라는 단어를 우연찮게 보았다.

그랬더니 이 기능을 텍스트 롤링이라고 부르는 것을 알게 되었다.

 

아무튼 나의 경우에는 li값만 교체 되도록 필요해서 해당 내용을 수정해야했다.

js는 회전을 건드리는 것이지 내용을 교체하는 방식이 아니기때문에..

php에서 해당 내용을 갯수만큼 뿌리고, li를 교체하는 방법을 고민하고 있었다.

지금 작성하는 도중에 생각난 건데, 나중에 생성된 갯수만큼 자동으로 연결되도록 뿌리는 방법을 찾아봐야 할듯...

지금은 최대 3개만 작동되니..

 

원본 소스의 경우 text 내용을 바꾸는 방식이었지만, 내 경우 html 태그를 바꾸는 방법이라

function으로 프레임을 만들고 호출하는 방식으로 덮어 씌워야 하나 싶기도 하다.

 

HTML

 <div class="rolling_box">
  <ul id ="rolling_box">
    <li class="card_sliding" id ="first"><p>1</p></li>
    <li class="" id ="second"><p>2</p></li>
    <li class="" id ="third"><p>3</p></li>
  </ul>
</div>

CSS

<style>
        .rolling_box{
            width: 300px;
            height: 40px;
            text-align: center;
            border: 1px solid #848484;
        }

        .rolling_box ul {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        .rolling_box ul li {
            width: 100%;
            height: 100%;
            transition: .5s;
            position:absolute;
            transition: top .75s;
            top: 100%;
            z-index: 1;
            background-color: #ffffff;
        }

        .card_sliding{
            top: 0 !important;
            z-index: 100 !important;
        } 

        .card_sliding_after{
            top: -100% !important;
            z-index: 10 !important;
        }

        .rolling_box ul li p {
            font-size: 30px;
            line-height: 40px;
            font-weight: bold;
        }

        .before_slide {
            transform: translateY(100%);
        }

        .after_slide {
            transform: translateY(0);
        }

    </style>

JS

<script>
        let timer = 2000 // 롤링되는 주기 입니다 (1000 => 1초)

        let first = document.getElementById('first'),
            second = document.getElementById('second'),
            third = document.getElementById('third')
        let move = 2
        let dataCnt = 1
        let listCnt = 1

        setInterval(() => {
            if(move == 2){
                first.classList.remove('card_sliding')
                first.classList.add('card_sliding_after')

                second.classList.remove('card_sliding_after')
                second.classList.add('card_sliding')

                third.classList.remove('card_sliding_after')
                third.classList.remove('card_sliding')

                move = 0
            } else if (move == 1){
                first.classList.remove('card_sliding_after')
                first.classList.add('card_sliding')

                second.classList.remove('card_sliding_after')
                second.classList.remove('card_sliding')

                third.classList.remove('card_sliding')
                third.classList.add('card_sliding_after')

                move = 2
            } else if (move == 0) {
                first.classList.remove('card_sliding_after')
                first.classList.remove('card_sliding')

                second.classList.remove('card_sliding')
                second.classList.add('card_sliding_after')

                third.classList.remove('card_sliding_after')
                third.classList.add('card_sliding')

                move = 1
            }
            
            if(listCnt < 2) {
                listCnt++
            } else if (listCnt == 2) {
                listCnt = 0
            }

            console.log(listCnt)
        }, timer);


    </script>

- 출처 -

https://velog.io/@jsg3121/%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%9E%90%EB%8F%99-%EB%A1%A4%EB%A7%81%ED%9A%A8%EA%B3%BC

텍스트 자동 롤링효과