📢 자바스크립트로 오른쪽에서 왼쪽으로 흐르는 문자 만들기(JavaScript Right-to-Left Marquee Text)

📢 자바스크립트로 오른쪽에서 왼쪽으로 흐르는 문자 만들기

뉴스 속보나 광고 배너처럼, 웹페이지 상단 또는 중간에 문자가 오른쪽에서 왼쪽으로 자연스럽게 흐르는 효과를 구현하고 싶을 때가 있습니다. 자바스크립트와 CSS를 조합하면 매우 간단하게 만들 수 있습니다.

✅ 결과 미리보기

📢 지금 등록하면 50% 할인 혜택을 드립니다! 놓치지 마세요! 🎉

🧾 전체 코드 보기

<div class="marquee-wrapper">
  <div class="marquee-text" id="marqueeText">
    📢 지금 등록하면 50% 할인 혜택을 드립니다! 놓치지 마세요! 🎉
  </div>
</div>

<style>
.marquee-wrapper {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  background-color: #222;
  color: #fff;
  padding: 10px 0;
  border: 2px solid #333;
  position: relative;
}

.marquee-text {
  display: inline-block;
  padding-left: 100%;
  animation: scroll-left 10s linear infinite;
  font-size: 18px;
}

@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>

<script>
const messages = [
  '📢 지금 등록하면 50% 할인 혜택!',
  '🚀 새로운 기능이 출시되었습니다!',
  '🎁 신규 회원 이벤트에 참여하세요!',
  '📞 24시간 고객센터 운영 중입니다!'
];

let index = 0;
const marquee = document.getElementById('marqueeText');

setInterval(() => {
  index = (index + 1) % messages.length;
  marquee.textContent = messages[index];
}, 10000);
</script>

📌 마무리

해당 코드는 블로그 상단 공지, 배너, 뉴스 속보, 알림창 등 다양하게 활용될 수 있으며, 자바스크립트를 통해 여러 문장을 순차적으로 출력할 수도 있어 실용성이 높습니다.