[marquee] javascript로 marquee 구현하기.. 흐르는 텍스트

흘러가는 텍스트를 만들일이 생겨 만들어 보았습니다.( jquery의 marquee 플러그인 사용은 배제했습니다!)

html 태그 중 marquee라는게 있긴 한데 브라우저 제한이 있다고 해서 자바스크립트로 구현했습니다.

구현 은 인터넷에 올라와 있는 자료들을 참고로 했습니다.

 

방법 1.

 

어려웠던 부분

텍스트의 너비를 pixel로 구하는 방법

 

아직 해결하지 못한 부분

아래 소스는 <div>에 marginleft 값을 변화시켜 텍스트를 흐르는 것 처럼 보이게 하는 방식입니다. 해당 소스 적용 시 크롬 모바일 개발자도구에서는 스크롤이 늘어나는 현상이 보이지 않지만, 실제 모바일에서 보면 margin 값에 따라 가로 스크롤이 늘어났다 줄어들었다 합니다..

 

css

.flowInfo{overflow : visible;  white-space : nowrap;  width : auto; display:block}

 

 

jsp

 <div id="domFlowInfo" class="flowInfo">흐르는 텍스트(marquee태그)</div>

 

javascript (jquery사용)
        var jsFlowTextInterval; // fn_popClose 사용을 위해 전역변수로 만들어 줘야 함.

        function fn_flowText() {
         i = i < jsTextLength ? i + step : -jsClientWidth;
         $("#domFlowInfo").css('marginLeft',-i + 'px');
         console.log("#");
          }
         
          var i = 0,step = 3;
          var jsTarget = $("#domFlowInfo");
          var jsClientWidth = (jQuery(window).width() + 1);

         

          //텍스트의 width를 구하기위해 아래와 같은 방법을 사용한다. 이유를 잘 모르겠다..
          var text = jsTarget.html();
          jsTarget.html('<span>'+text+'</span>');
          var jsTextLength = jsTarget.find('span:first').width();
          jsTarget.html(text);

          jsFlowTextInterval = setInterval(fn_flowText, 50);
          
          function fn_popClose() {
         clearInterval(jsFlowTextInterval);
        }

 

----------------------------

 

방법 2.

 

css3 animation 효과를 사용하는 방법으로 해당 문제를 해결하기 위해 커뮤니티에 질문을 올렸는데 어떤 분이 답변해주신 내용이에요~

구현은 정말 쉽고 약간의 수정만 하면 됐었으나 방법1과 동일한 문제가 발생하네요.ㅠ

 

 

css

body { margin: 20px; }

.marquee {
  height: 25px;
  width: 420px;

  overflow: hidden;
  position: relative;
}

.marquee div {
  display: block;
  width: 200%;
  height: 30px;

  position: absolute;
  overflow: hidden;

  animation: marquee 5s linear infinite;
}

.marquee span {
  float: left;
  width: 50%;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}

html

<div class="marquee">
  <div>
    <span>You spin me right round, baby. Like a record, baby.</span>
    <span>You spin me right round, baby. Like a record, baby.</span>
  </div>
</div>