자바스크립트 - 모션블러효과 / Javascript - Motion Blur

모션블러 자바스크립트 소스 다운로드 Javascript Motion Blur source download

이번에 소개할 자바스크립트는 텍스트 효과 중에서 텍스트가 서서히 나타나면서(Fade In) 블러(Blur)와 모션(Motion)을 반복하는 자바스크립트입니다.

이미 여러 자바스크립트 사이트에서 소개된 내용으로 여기서는 블로그에 적용 가능토록 수정해서 소개합니다.

참고하실 점은 Blur의 경우는 IE에서만 사용되는 전용 필터효과인 관계로 IE 브라우저에는 Fade In, Blur, Motion이 모두 구현되지만 그 외의 브라우저(FireFax, Crome....등)에서는 Blur 필터가 적용되지 않아 Fade In과 textShadow로 비슷하게 적용해 보았습니다.

자바스크립트를 아시는 분은 다른 필터를 사용해서 자신만의 효과를 만들어도 좋을 듯 합니다.

아래는 실제 적용된 자바스크립트 입니다.

1. 스크립트 설정

var textsize = "16pt";          // 글자 크기
var textfont = "굴림체";       // 폰트 이름
var textweight = "lighter";   // normal(보통), bold(굵게), bolder(보다굵게),lighter(보다 얇게)
var textstyle = "oblique";    // italic(띄어쓰기 좁고 기울임), normal(보통), oblique(표준폰트 기울임)

// 표시하고자하는 메시지는 아래와 같이  message[0]~[12] 사이에 할당합니다.
message[0]="두그미의 사는 이야기...";
message[1]="http://all4cs.tistory.com";
.
.
// 추가하고 싶을 경우는 message[XX]복사해서 [13]부터 넣으시면 됩니다.

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

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

2) HTML 모드에서 첨부된 화일의 내용 중에서 아래의 내용을 복사하여 원하는 위치에 붙여넣습니다.
    실제 효과가 적용될 div 태그입니다.

   <div id="blurDiv" style="float:left;color:#000000;"></div>

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

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

Javascript_Motion_Blur.txt

유용하게 사용하세요.

자바스크립트 모션블러효과 / Javascript Motion Blur

http://all4cs.tistory.com - 두그미의 사는 이야기