CSS만을 활용한 텍스트 롤링 효과 구현하기

홈페이지의 기능이나 기타 여러가지 디자인적 요소로 많이 활용이 가능한 롤링 효과를 CSS만으로 구현하는 방법을 공유해 보고자 합니다. 

텍스트 롤링 예제 미리보기

Text Rolling

반응형

구현된 소스를 확인해 보겠습니다. 

HTML 소스 영역 

<div class="card">
    <div class="loader">
        <p>loading</p>
        <div class="words">
            <span class="word">buttons</span>
            <span class="word">forms</span>
            <span class="word">switches</span>
            <span class="word">cards</span>
            <span class="word">buttons</span>
        </div>
    </div>
</div>

CSS 소스 영역

.card{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
.loader{color:rgb(124,124,124);font-weight:500;font-size:36px;display:flex;height:48px;padding:8px;box-sizing: content-box;}
.loader p{margin:0;padding:0;}
.words{overflow:hidden;position:relative;}
.words::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--color_whitegray) 10%, transparent 20%, transparent 80%, var(--color_whitegray) 90%);z-index:20;}
.word{display:block;height:100%;padding-left:8px;color:#956afa;animation:spin 4s infinite;}

@keyframes spin {
    10%{
        transform: translateY(-103%);
    }
    25%{
        transform: translateY(-100%);
    }
    35%{
        transform: translateY(-203%);
    }
    50%{
        transform: translateY(-200%);
    }
    60%{
        transform: translateY(-303%);
    }
    75%{
        transform: translateY(-300%);
    }
    85%{
        transform: translateY(-403%);
    }
    100%{
        transform: translateY(-400%);
    }
}

4개(buttons, forms, switches,cards)의 단어가 반복되는 구조입니다.
4초동안 spin keyframe를 실행하도록 구성되어 각 단어 당 1초의 노출 시간을 제공하고 있습니다.

단어를 추가할 경우 keyframes를 원하는 단어 수량 만큼 배분하여 사용하시면 됩니다. 
시간 조절은 애니메이션 진행 시간을 조정하시면 가능합니다. 

728x90

최소한으로 필요한 부분만 소스를 공유드린 부분으로 롤링되면서 단어별 색상을 달리하는 것과 같은 효과를 추가적으로 줄 수도 있을거 같습니다.