CSS 애니메이션으로 자연스러운 텍스트 무한 스크롤 효과 만들기 (Marquee 구현법)
CSS 25.07.10CSS 애니메이션으로 자연스러운 텍스트 무한 스크롤 효과 만들기 (Marquee 구현법)
텍스트가 자연스럽게 반복되어 흘러가는 무한 스크롤(marquee) 효과, CSS만으로도 깔끔하게 구현할 수 있습니다.
별도의 JavaScript 없이 CSS의 @keyframes와 animation 속성을 이용해 부드러운 무한 스크롤(marquee) 애니메이션을 만들어 보세요.
➰➰➰
✅ marquee 효과란?
- marquee 효과는 텍스트나 이미지 등 요소가 지속적으로 스크롤되는 애니메이션을 말합니다.
- 예전에는 marquee라는 태그를 사용했지만, 현재는 웹 표준과 접근성 기준에서 제외되어 CSS animation으로 직접 구현하는 것이 표준입니다.
✅ marquee 효과는 언제 사용하면 좋을까요?
- 주요 메시지 반복 노출
- 이벤트나 할인 정보 강조
- 공지사항 또는 뉴스 헤드라인
- 사용자의 시선을 자연스럽게 유도하고, 반복 정보 전달이 필요한 경우에 매우 유용합니다.
✏️ HTML 구조는 이렇게 생겼어요
✔ .marquee__wrap : 전체 영역을 감싸며 overflow: hidden;속성으로 넘침 방지
✔ .marquee__inner : 스크롤 애니메이션이 적용될 대상
✔ .marquee__list : 반복 텍스트 묶음
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 | <section id="inc03" data-aos="fade-up"> <div class="marquee__wrap"> <a href="" class="marquee__inner"> <span class="marquee-list"> <span class="marquee-item">More works</span> <span class="marquee-item">More works</span> <span class="marquee-item">More works</span> <span class="marquee-item">More works</span> <span class="marquee-item">More works</span> <span class="marquee-item">More works</span> <span class="marquee-item">More works</span> <span class="marquee-item">More works</span> </span> <span class="marquee-list"> <span class="marquee-item">More works</span> <span class="marquee-item">More works</span> <span class="marquee-item">More works</span> <span class="marquee-item">More works</span> <span class="marquee-item">More works</span> <span class="marquee-item">More works</span> <span class="marquee-item">More works</span> <span class="marquee-item">More works</span> </span> </a> </div> </section> | cs |
✏️ CSS로 효과 구현하기
animation: keyframes명 재생시간 속도 반복여부;
✔ linear : 일정속도
✔ infinite : 무한반복
@keyframes
✔ 애니메이션의 시작(0%)~끝(100%)의 변화를 정의하는 속성입니다.
✔ 애니메이션 이동 거리인 translateX(-1022.5px) 값은, 텍스트의 흐름이 화면에서 끊기지 않고 자연스럽게 반복되도록 눈으로 확인하며 조정한 수치입니다.
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 32 33 34 35 36 37 38 | #inc03 .marquee__wrap{ overflow:hidden; } #inc03 .marquee__wrap .marquee__inner{ display:flex; transform:translateX(0); animation:marquee 12s linear infinite; } #inc03 .marquee__wrap .marquee-list{ display:flex; gap:100px; padding-right:100px; } #inc03 .marquee__wrap .marquee-list .marquee-item{ font-weight:400; font-size:50px; line-height:100%; white-space:nowrap; color:transparent; -webkit-text-stroke:1px var(--point); background:linear-gradient(to top, var(--point) 50%, transparent 50%); background-size:100% 200%; background-position:top; background-clip:text; transition:background-position 0.3s ease } #inc03 .marquee__wrap .marquee-list .marquee-item:hover{ background-position:bottom } @keyframes marquee{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-1022.5px); } } | cs |
✅ 자연스럽게 반복되도록 만드는 팁
- 반복 텍스트는 충분한 간격과 수량으로 배치해야 끊김이 없습니다.
- 이동 거리인 translateX 값은 직접 눈으로 보며 조정하는 것이 가장 직관적이고 안정적입니다. ex) transform: translateX(-1022.5px);
또한, 이 방식은 요소의 실제 렌더링 결과와 사용자 시선을 함께 고려하기 때문에 끊김 없는 부드러운 흐름을 만들기에 효과적입니다.
단, 텍스트 내용이나 스타일이 변경되면 반복 구간이 어긋날 수 있으므로, 애니메이션이 자연스럽게 이어지는지 항상 직접 확인하며 이동 거리를 조정하는 것이 중요합니다.
✅ 왼쪽 → 오른쪽 흐르게 하려면?
- 초기 위치를 오른쪽 바깥으로 설정하고 translateX(양수)로 이동합니다.
1 2 3 4 5 6 7 8 | @keyframes marqueeReverse { 0% { transform: translateX(-1022.5px); } 100% { transform: translateX(0); } } | cs |
See the Pen Untitled by designkits (@designkits) on CodePen.
