minstudio

무한 롤링 마키 (Infinite Marquee)

요즘 애플이나 토스 같은 랜딩 페이지에서 흔히 볼 수 있는 "무한 롤링 텍스트" 효과입니다. 자바스크립트 없이 순수 CSS만으로 구현할 수 있습니다. 핵심 원리는 요소를 두 세트 복사해두고, translateX를 이용해 -50% 지점까지 이동시킨 뒤 다시 0%로 빠르게 되돌리는 것입니다. animation-timing-function: linear를 사용해야 속도가 일정하게 유지되어 자연스럽습니다.

<div class="marquee-container">
  <div class="marquee-content">
    <span class="marquee-item">HTML5</span>
    <span class="marquee-item">CSS3</span>
    <span class="marquee-item">JavaScript</span>
    <span class="marquee-item">React</span>
    <span class="marquee-item">Next.js</span>
    
    <span class="marquee-item">HTML5</span>
    <span class="marquee-item">CSS3</span>
    <span class="marquee-item">JavaScript</span>
    <span class="marquee-item">React</span>
    <span class="marquee-item">Next.js</span>
  </div>
</div>

실행 결과

무한 롤링 마키 (Infinite Marquee) | Minstudio