Index

変化する文字

　JavaScript の実用的な Tips です。このページでは、文字に変化をつけるTIPSを扱います。文字サイズや文字色を動的に変化させるサンプルを掲載しています。

[INDEX]	・拡大・縮小	::　文字のサイズを徐々に変化させる
	・フェードイン・フェードアウト	::　文字の色を徐々に変化させる
	・点滅	::　文字を回数を指定して点滅させる
[ 参考ページ : 流れる文字列 : ステータスバーに / タイトルバーに / テキストボックスに / ページ上に ]

sasaraan programming

Exposition

■拡大・縮小

　文字が徐々に大きくなるサンプルです。

// JavaScriptソース
var maxSize = 32;    // 最大文字サイズ
var currSize = 8;     // 現在の文字サイズ（値は初期値）
var nStep = 1;        // 一度に大きくするサイズ
var nSpeed = 100;   // 大きくする間隔（ミリ秒単位）
var strUnit = "px";   // 文字サイズの単位
var objChar;           // 操作するオブジェクト

function SizingChar(idChar) {
      if (!document.getElementById) return;
      objChar = document.getElementById(idChar);
      objChar.style.fontSize = currSize + strUnit;
      SetTimer();
}

function SetTimer() {
      if (currSize < maxSize) {
            currSize += nStep;
            if (currSize >= maxSize) currSize = maxSize;
            objChar.style.fontSize = currSize + strUnit;
            setTimeout("SetTimer()", nSpeed);
      }
}

<!-- HTMLソース -->
<body onload="SizingChar('char')">
      <div id="char" style="position:absolute;">
            文字の大きさが変わります
      </div>
</body>

　SizingChar 関数では、id 属性値によりオブジェクトを特定し、文字サイズを初期値に設定しています。文字サイズの単位 ( strUnit ) には、他にも "pt", "pc" などがありますので、好みの指定方法を選択します。
　続く SetTimer 関数では、まず、現在の文字サイズ( currSize )をチェックして、目標サイズ（ここでは maxSize ）に達していれば処理を中断します。そうでなければ、nStep 分だけ文字サイズを増減します。ただし、目標サイズを超えたら目標サイズの値に戻してからサイズを設定します。
　以下は、逆に文字が徐々に小さくなるサンプルです。

// JavaScriptソース
var minSize = 8;        // 最小文字サイズ
var currSize = 32;     // 現在の文字サイズ（値は初期値）
var nStep = 1;          // 一度に小さくするサイズ
var nSpeed = 100;    // 小さくする間隔（ミリ秒単位）
var strUnit = "px";   // 文字サイズの単位
var objChar;            // 操作するオブジェクト

function SizingChar(idChar) {
      if (!document.getElementById) return;
      objChar = document.getElementById(idChar);
      objChar.style.fontSize = currSize + strUnit;
      SetTimer();
}

function SetTimer() {
      if (currSize > minSize) {
            currSize -= nStep;
            if (currSize <= minSize) currSize = minSize;
            objChar.style.fontSize = currSize + strUnit;
            setTimeout("SetTimer()", nSpeed);
      }
}

　HTMLの記述と SizingChar 関数は拡大と同じです。目標サイズを示す変数 maxSize （最大サイズ）が minSize （最小サイズ）に替わっています。また、 SetTimer 関数では不等号の向きがすべて前節と逆になります。

■フェードイン/フェードアウト

　文字のフェードイン、フェードアウトの両方に対応するサンプルです。フェードの如何に関わらず、色の指定の仕方によって、色を変化させることができます。

// JavaScriptソース
var currColor = new Array(255, 0, 0);  // 現在の色（R, G, B）: 初期値は最初の色
var lastColor  = new Array(0, 0, 255);  // 最後の色（R, G, B）
var stepColor = new Array(-8, 0, 8);    // 一度に変化させる幅（R, G, B）
var nSpeed = 50;    // 変化させる間隔（ミリ秒）
var objChar;        // 操作するオブジェクト

function FadeChar(idChar) {
      if (!document.getElementById) return;
      objChar = document.getElementById(idChar);
      objColor.style.color = 
            "rgb(" + currColor[0] + "," + currColor[1] + "," + currColor[2] + ")";
      SetTimer();
}

function SetTimer() {
      var i;
      var bReach = true;    // 目的の値に達したかどうか
      for (i=0; i<3; i++) {     /* 色毎（R, G, B）に処理 */
            currColor[i] += stepColor[i];
            if (stepColor[i] >=0 && currColor[i]>=lastColor[i]) {
                  currColor[i] = lastColor[i]; 
            } else if (stepColor[i] < 0 && currColor[i]<=lastColor[i]) {
                  currColor[i] = lastColor[i];
            } else {
                  bReach = false;
            }
      }
      objColor.style.color = 
            "rgb(" + currColor[0] + "," + currColor[1] + "," + currColor[2] + ")";
      if (!bReach) setTimeout("SetTimer()", nSpeed);
}

<!-- HTMLソース -->
<body onload="FadeChar('fade')">
      <div id="fade" style="background-color:#ffffff; font-size:20px;">
            文字の色が変わります
      </div>
</body>

　色は R （赤）・ G （緑）・ B （青）の三原色の組み合わせです。各値は、0(00) から 255(FF) までの範囲（括弧内は16進値）を取ります。色は16進値では"#ff6600"、10進値で表す時は"rgb(255, 102, 0)"のように記述します。
　サンプルでは、まず、配列（Array オブジェクト）を使ってRGB値を表現( currColor, lastColor, stepColor )しています。フェードインやフェードアウトにしたい時は、いずれかの文字色( currColor か lastColor )を背景色に合わせる必要があります。
　FadeChar関数では、id 属性値からオブジェクトを特定して、初期設定した色( currColor )に文字色を設定しています。
　SetTimer 関数では、R, G, B の色毎に値を増減しています。この時、変数 bReach で目的の値に達したかどうかを代入しています。一つでも達していなければ false が代入されます。ただし、増減する値( stepColor )がプラスであるかマイナスであるかで、チェックの仕方が異なりますので、if 文で分岐処理を行っています。最後に、 bReach を調べて、 false であれば、再び SetTimer 関数を呼び出して処理を続けることになります。

■点滅

　文字を点滅させるサンプルです。実際は文字色を変えることで点滅したように見せかけています。また、点滅の回数を指定できるようにしています。

// JavaScriptソース
var colorA = "#ff6600";    // 表示色A
var colorB = "#ffcccc";    // 表示色B
var timeA = 1000;    // 色Aの表示時間（ミリ秒）
var timeB = 500;     // 色Bの表示時間（ミリ秒）
var nRepeat = 10;    // 色を切り替える回数（マイナス値で無限回数）
var idTimer;            // タイマーのID
var objChar;            // 操作するオブジェクト

function BlinkChar(idChar) {
      if (!document.getElementById) return;
      objChar = document.getElementById(idChar);
      objChar.style.color = colorA;
      SetTimer();
}

function SetTimer() {
      if (idTimer) clearTimeout(idTimer);
      if (nRepeat != 0) {
            if (nRepeat % 2 == 0) {
                  objChar.style.color = colorB;
                  idTimer = setTimeout("SetTimer()", timeB);
            } else {
                  objChar.style.color = colorA;
                  idTimer = setTimeout("SetTimer()", timeA);
            }
            if (nRepeat > 0) nRepeat--; 
     }
}

<!-- HTMLソース -->
<body onload="FadeChar('blinker')">
      <div id="blinker" style="color:#ff6600; background-color:#ffffff;">
            文字が点滅します
      </div>
</body>

　サンプルでは、二つの色( colorA , colorB )を交互に表示します。それぞれ個別に表示時間を設定し、さらに切り替えの回数も設定できるようにしています。colorB に背景色を設定すれば透明色と同じになります。
　BlinkChar 関数では、id 属性値からオブジェクトを特定し、色の初期値を colorA に設定しています。
　SetTimer 関数では、まず、タイマーをいったん解除しています。二つの色で別々のタイマーを設定し直すためです。次に、nRepeat の値を調べ奇数か偶数かで処理を分けています。処理後は切り替え回数 nRepeat から 1 を引いて、回数が 0 になるまで処理を続けます。ただし、マイナス値の場合は無限に繰り返すことにしますので、nRepeat に対して操作はしません。