【JavaScript/DHTMLのポイント】

虹サイン

文字の色を変えるには普通は<font>タグを使いcolor指定をします。ここでは文字の色を虹色表示にすることをやって見ました。
タイトルの文字の部分を透過色にしたimgを用意し、後ろに虹色の背景imgを配置することで、文字の部分に背景の虹色が透過して見えるようにしています。
単に表示しただけではDHTMLでもありませんので、背景の虹色パターンを４種用意し、これらを切り替えると同時にこの背景パターンを移動することで文字の色が段々と変わるようにしました。
また文字自身も上、左に移動するパターンも作ってみました。
４種の虹色背景img、二つの文字img、枠(ごみパターンを隠すため）imgをそれぞれレイヤ(div)に配置します。この順で背面から前面に配置されています。
文字imgが２枚あるのは文字を上、左に移動したときに２枚をつないで途切れなく文字を表示するためです。背景は途切れなく表示するため大きなimgの一部を使うようにしています。(モバイル対応のため背景が左右に動くときは2枚を貼り合わせて移動するよう変更しました。）
ロードし終わるとIniSet()関数が起動されブラウザの種類を判定後、各レイヤのエレメント名を求め、フレームのレイヤを初期位置に移動・表示後Pt()関数を起動します。
Pt(n)関数はパターン番号nに応じて背景パターンの一回の移動量Cstep、この移動量の最大値Cmax、文字の移動量の最大値Tmaxを決めた後、各パターン共通の移動量初期値Cc,Tcを0に、文字の一回の移動量Tstepを4に設定し、タイトル文字画面を初期位置に移動し最後にパターン番号を指定してDisplay()関数を起動します。
Display(n)関数では(n=5の例で説明)背景１のレイヤをX,Cc-240の位置に移動し、上下を240-Cc,540-Ccでクリップ表示します。
これは240ピクセルで繰り返している虹色パターンの240-Ccピクセルからタイトル文字パターン高さと同じ300ピクセル分を文字パターンの背後に表示することになります。
一方タイトル文字imgは一つ目をX,-Tcの位置に上下をTc,300でクリップして表示し、二つ目をX,300-Tcの位置に上下を0,Tcでクリップして表示します。これで２枚のタイトル文字imgはTcだけ上に移動した１枚のタイトルに見えます。
このあと次回の移動位置を求めるためCcにCstepを加えCcが最大移動量Cmaxを超えていれば0にし、同じ様にTcについても次回の移動位置を求めます。最後にタイマを起動し再度Display()関数を呼びます。
Display()関数が呼ばれるたびに新たなCc,Tcを使い背景パターン、タイトル文字の位置が表示されるため虹の模様が流れたり、タイトル文字が移動して見えるようになります。
フレームに配置されたボタン「１」～「８」をクリックするとPt()関数が呼ばれ、番号nに応じて背景パターン、タイトル文字の一回の移動量などを設定後Display()関数を呼び出し、指定のパターンで表示が始められます。

Java Script事例集トップページへ

鴈野さんちのHomePage TOPへ

ご感想などは鴈野敏生まで。