marquee 효과 소스 - 자바스크립트(Javascript)

자바스크립트, 흐르는 글, 소스, 다운로드, Javascript, marquee, Rainbow, source, download

이번에 소개할 자바스크립트는 텍스트 효과 중에서 텍스트를 Marquee(흐르는 글) 효과를 반복하도록하는 스크립트입니다.

연속적으로 좌로 이동하면서 텍스트 컬러가 변화하는 스크립트 입니다. HTML 코드의 <A> 태그에 적용하여 클릭시 링크로 이동이 됩니다.

추가로 블로그 타이틀에 적용하는 방법도 설명하도록 하겠습니다. 텍스트 및 색상은 설정법 보시고 본인에 맞도록 수정하시면 됩니다.

아래는 실제 적용된 소스입니다.

자바스크립트 (Javascript) 소스

1. 스크립트 설명 (설명이 없는 부분은 그냥 넘기시기 바랍니다.)

1) HTML 태그 부분
//Marquee가 적용될 <A> 테그입니다. <div>테그로 수정하셔도 됩니다.
<a id="marquee" title="javamarquee" href="http://all4cs.tistory.com/39">자바스크립트</a>

2) 자바스크립트 부분
//스크롤 스피드
ScrollSpeed3 = 300;
ScrollChars3 = 1;

// 글자색 설정
var rainbow=new Array("red","darkorange","gold","green","blue","navy","purple");
var strSpace ="&nbsp;";

var objA = FindObj();
objA.innerHTML = strSpace + objA.innerHTML;

// 폰드 크기
objA.style.fontSize =20;
// 글자 굵게
objA.style.fontWeight = "bolder";

2. 블로그 타이틀 적용법

1) HTML/CSS에서 skin.html 편집에서 아래를 찾습니다. 간혹 스킨에 따라 아래 굵은 표시의 title이 없는 경우도 있으니 없으면 추가해 주십시오.

<div id="header">
<div class="head-container">
  <h1><a href="[ ##_blog_link_## ]" title="[ ##_title_## ]">[ ##_title_## ]</a></h1>
</div>
</div>

2) 첨부된 화일을 다운받아 HTML/CSS에서 skin.html 최하단에 붙여 넣고 저장을 하면 바로 적용이 됩니다.

3. 블로그 포스트 내에서 적용법

1) 글쓰기에서 HTML모드를 체크합니다.

2) HTML 모드에서 첨부된 화일의 내용 중에서 아래의 내용을 복사하여 붙여넣습니다. (굵은 표시는 원하는 대로 수정하시면 됩니다.)
   <a id="marquee" title="javamarquee" href="http://all4cs.tistory.com">자바스크립트</a>

3) 첨부화일의 <Script Language="Javascript"> ~ </Script>까지의 내용을 복사하여 HTML 모드에서 글의 마지막에 붙여넣습니다.

4) 저장을 하고 확인합니다.

블로그 타이틀용	블로그 포스트용
marquee_title.txt	marquee_post.txt

유용하게 사용하세요.