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

자바스크립트, 날으는 글, 소스, 다운로드, Javascript, Fly text, source, download

이번에 소개할 자바스크립트는 텍스트 효과 중에서 텍스트가 좌측에서 날아오는 효과(Fly text)를 반복하도록하는 스크립트입니다.

좌측에서 기울림 형식으로 날아와 속도감이 있습니다. . HTML 코드의 <A> 태그에 적용하여 클릭시 링크로 이동이 됩니다.
(div 태그에 적용이 가능하므로 자바스크립트를 아시는 분은 수정해 보세요.)

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

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

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

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

1) SetConfig()의 함수의 설정 부분들을 수정하면 됩니다.
    flyheader.fontSize = "30px";                           // Font Size   (폰트 크기)
    flyheader.fontFamily = "Times New Roman";   // Font Name   (폰트 이름)
    flyheader.color ="red";                                   // Font Color  (폰트 색상)
    flyheader.fontWeight = "bolder"                        // Font Bolder (굵게)
    flyheader.fontStyle = "italic";                           // Font Italic (기울이기)
2) 그외의 부분을 자바스크립트를 숙지하신 후 수정해 보시기 바랍니다.

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 최하단에 붙여 넣고 저장을 하면 바로 적용이 됩니다.

[참고] 타이틀용의 경우 설정부분을 넣지 않았습니다. Tistory의 설정을 그대로 사용합니다.

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

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

2) HTML 모드에서 첨부된 화일의 내용 중에서 아래의 내용을 복사하여 붙여넣습니다.
    (실제 효과가 적용될 부분이며 굵은 표시는 원하는 대로 수정하시면 됩니다.)

   <a href="http://all4cs.tistory.com/40" title="flytext">Javascript Fly Text - 4Cs</a>

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

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

블로그 타이틀용	블로그 포스트용
javascript_fly_text_Title.txt	javascript_fly_text_post.txt

조금 응용을 하시면 이 글처럼 제목에 적용이 가능합니다. 제목의 적용법은 따로 설명을 하지 않으니 한번 시도해 보시고 요청이 있을 경우 제목의 적용법을 추가하도록 하겠습니다.

유용하게 사용하세요.