VUE3.0 흘러가는 텍스트

💛 내가 재활용하기 위해 작성
글 쓴지 참 오래됐다!

 

흘러가는 텍스트를 만들기 위한 코드다.

// template
<div id="scrolling-text-container">
    <span id="scrolling-text">
    	{{ title }}
    </span>
 </div>

// style
<style scoped>
#scrolling-text-container {
  width: 17.8rem;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

#scrolling-text {
  display: inline-block;
  animation: scrollText 20s linear infinite;
}

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

 

만약 span의 길이가 해당 div의 길이를 넘어갈 때에만  흘러가게 하고싶다면?

// ts
const container = document.getElementById('scrolling-text-container')
const text = document.getElementById('scrolling-text')
if (container && text)
    checkOverflow(container, text)

function checkOverflow(container: HTMLElement, text: HTMLElement) {
    if (text.scrollWidth > container.clientWidth)
        text.classList.add('scroll')
    else
        text.classList.remove('scroll')
}

// style
<style scoped>
#scrolling-text-container {
  width: 17.8rem;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

#scrolling-text {
  display: inline-block;
}

.scroll {
  animation: scrollText 20s linear infinite;
}

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

 

대충 요런 식으로 scroll 클래스를 넣었다 빼줬다 할 수 있다!