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

2016. 12. 28. 22:54·공부/Javascript

흘러가는 텍스트를 만들일이 생겨 만들어 보았습니다.( 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>

반응형
'공부/Javascript' 카테고리의 다른 글
  • Vue.js 재직자 교육 4일차 [뷰 컴포넌트,뷰 템플릿
  • [Vue.js] vue.js 시작하기 및 초보자 예제 실습
  • [jQuery] 제이쿼리 시작하기
  • [javascript] javascript 내부의 //<![CDATA[//]]를 쓰는 이유
JangGiraffe
JangGiraffe
안녕하세요~ 반갑습니다! 머무시면서 즐거운 시간 보내시길 바랍니다. 오픈카톡 : https://open.kakao.com/o/sYEBs0uh
  • JangGiraffe
    giraffe1010
    JangGiraffe
  • 전체
    오늘
    어제
    • 분류 전체보기 (390)
      • 공부 (155)
        • AI (3)
        • Spring (10)
        • JAVA (31)
        • python (6)
        • 기타 (12)
        • 메세지 (3)
        • Jsp,Servlet (4)
        • HTML (12)
        • Javascript (6)
        • C#,ASP.NET (2)
        • WEB (2)
        • DB (11)
        • Android (18)
        • [BaaS]Parse.com (4)
        • 졸업프로젝트 (4)
        • AWS,네이버클라우드플랫폼 (2)
        • Ubuntu (6)
        • maven (1)
        • 자료구조 (15)
        • 서버 (3)
      • 게임 (0)
      • 관심 (22)
        • 사진 (1)
        • 패스오브엑자일(POE) (1)
        • 월드오브워크래프트 (4)
        • 블로그 (7)
        • 이슈 (1)
        • IT (5)
        • 기타 게임 (3)
      • 자료 (2)
        • 면접 (2)
      • 먹거리 (103)
        • 음식리뷰 (99)
        • 카페리뷰 (4)
      • 여행 (35)
        • 국내여행 (23)
        • 해외여행 (12)
      • 생활정보 (68)
        • 생활정보 (33)
        • 상품리뷰 (34)
        • 세미나후기 (1)
      • 끄적끄적 (5)
        • 영화후기 (1)
  • 블로그 메뉴

    • 홈
    • 태그
    • 문의(카톡)
    • 방명록
  • 링크

    • 2zino
    • wildbluffer
  • 공지사항

  • 인기 글

  • 태그

    강원도여행
    시즈오카
    마곡맛집
    발산 회식
    ChatGPT
    왕십리맛집
    오징어난전
    제주도맛집
    김포맛집
    돈벌기
    맛집
    월드오브워크래프트
    와우
    홍대맛집
    자취
    떡볶이
    양양 가볼만한 곳
    발산맛집
    강서구맛집
    가양맛집
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
JangGiraffe
[marquee] javascript로 marquee 구현하기.. 흐르는 텍스트
상단으로

티스토리툴바