〰️ 모바일 브라우저에서 띠 배너의 내용이 길어서 잘리는 경우, 흐르는 애니메이션 추가

ASIS TOBE

 

---

🚨 문제상황

상단의 띠배너 내용이 브라우저 크기보다 길어서 내용이 ...처리되는 이슈가 있었다.

지하철 안내 전광판 처럼 글자가 흐르도록 하길 원한다는 클라이언트의 요청.

 

 

✅ 해결 방법

 

✔️ 내부의 글자 길이가 브라우저 너비보다 긴 경우, 흐르는 애니메이션이 작동되도록 했다.

✔️ 애니메이션 실행시, 글자가 반복되어야 길게 - 끊이지 않게 진행되기에 cloneNode를 활용해 문구를 복사해줬다.

✔️ 브라우저 크기가 커져 애니메이션이 필요 없어지면, 복사해준 cloneNode는 지워주었다.

 

 

<div class="top-banner">
  <div class="top-banner__wrap">
    <div class="top-banner__content">
    	<a class="top-banner__link" href="{#href}">{#title}</a>
    </div>
  </div>
</div>

<script>
  function applyMarquee() {
    var bannerContent = document.querySelector(".top-banner__content");
    var bannerLink = document.querySelector(".top-banner__link");

    // 초기화 - 중복된 요소 제거
    var clonedLink = document.querySelector(".top-banner__link.clone");
    if (clonedLink) {
      clonedLink.remove();
    }

    // 화면 너비가 768px 이하인 경우에만 실행
    if (window.innerWidth <= 768) {
      // 텍스트의 실제 길이와 컨테이너의 너비를 비교
      if (bannerLink.scrollWidth + 50 > bannerContent.clientWidth) {
        // 텍스트가 컨테이너보다 길다면 애니메이션 클래스 추가
        bannerContent.classList.add("marquee");

        // top-banner__link를 두 번 복제하고 클래스 'clone' 추가
        for (var i = 0; i < 2; i++) {
          var clonedLink = bannerLink.cloneNode(true);
          clonedLink.classList.add("clone");

          // 복제된 요소를 원본 뒤에 추가
          bannerContent.appendChild(clonedLink);
        }
      } else {
        // 텍스트가 길지 않은 경우 애니메이션 클래스 제거
        bannerContent.classList.remove("marquee");
      }
    } else {
      // 화면이 768px 초과일 경우 애니메이션 클래스 제거
      bannerContent.classList.remove("marquee");
    }
  }

  // 페이지 로드 시 적용
  document.addEventListener("DOMContentLoaded", applyMarquee);

  // 화면 크기 변경 시 적용
  window.addEventListener("resize", applyMarquee);
</script>

<style>
.marquee .top-banner__link {
  padding-left: 0;
  animation: marquee 15s linear infinite;
}
.marquee .top-banner__link + .top-banner__link {
  margin-left: 20px;
}
/* 텍스트 흐르는 애니메이션 */
@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>