흐르는 글씨 효과

html에 마퀴태그가 있으나, 지원이 언제 안되도 이상할 것 없다하니

다른 방법을 찾아보기로 했다. 

텍스트의 길이가 일정하고 짧은 문구라면 슬라이딩을 응용하면 되겠다 싶었지만,

길이가 일정하지 않은 긴 문구 두 개를 로딩지연 없이 슬라이딩 하려니....

그래서 찾다가 발견한 코드를 살짝 응용.

흐르는 것이 아니고 한글자식 앞뒤로 자르고 붙여주는 방식으로 흐르는것 같은 효과이다.

자르고 붙이는 방식이다 보니. 조금은 어색하고, 앞쪽을 보면 정신없다. ㅎㅎㅎ

 <div class="text-container" data-text="산토끼 토끼야 어디를 가느랴 깡총깡총 뛰면서 어디를 가느냐"></div>

 

      let position = 0;
      let text = $('.text-container').data('text');
      let size = text.length;
      function scrollText() {
        if (position < size) {
          $('.text-container').text(text.substring(position, position + 40));
          if (position === size - 40) {
            text += "" + text;
          }
          position++;
          setTimeout(scrollText, 1000 / 10);
        } else if (position === size) {
          position = 0;
          $('.text-container').text("" + text.substring(position, size));
          text = text.substring(position, size);

          setTimeout(scrollText, 1000 / 10);
        }

      }
      scrollText();