スタイル変更

動く文字サンプル集(仮ページ)

目次

文字がスクロールします。MARQUEE とほぼ同じの動きをするものを作ってみました。(^ ^)
スクロール量やスクロール間隔は MARQUEE のように変更することができます。

左方向スクロール

文字が左方向にスクロールします。MARQUEE(属性指定なし)とほぼ同じです。
(スクロール方向:左、スクロール量:6px、スクロール間隔:85ミリ秒)

※ 参考:MARQUEEでは…

左右往復スクロール

文字が左右を行ったり来たりします。MARQUEE(属性BEHAVIOR="alternate")と同じです。
(スクロール方向:左右往復、スクロール量:6px、スクロール間隔:85ミリ秒)

※ 参考:MARQUEEでは…

やや複雑なスクロール文字です。MARQUEEでは実現できない複雑な動きや複数メッセージも JavaScript ならできてしまいます。(^ ^)

上方向スクロールメッセージ

メッセージが下から上にスクロールします。MARQUEEでも同等のものができます。
(スクロール方向:上、スクロール量:2px、スクロール間隔:50ミリ秒)

※ 参考:複数メッセージ対応版 MARQUEでは…

飛び回る文字

文字が斜めにスクロールし、ウィンドウ上を飛び回ります。

上方向スクロールメッセージ(複数メッセージ対応)

上記の上方向スクロールメッセージの改良版です。MARQUEEでは実現できない複数メッセージに対応しています。

※ Opera では2番目のメッセージが先に表示されるという不具合が発生するようです。(Opera 7.11 で確認)

※ 参考:MARQUEでは…

横方向スクロールメッセージ(電光掲示板風 / 複数メッセージ対応)

外見上はMARQUEEのページにあるものと同じですが、複数のメッセージに対応しています。

このサンプルは独自拡張のタグを使用しています。IE6.x で DOCTYPE 宣言を厳格モードにすると(もちろん文法違反ですが ^^;)文字のスタート位置がずれます。

※ 参考:MARQUEでは…

※ 比較的最近のバージョンの Mozilla ではちらつきが発生するようです。

だんだん大きく1

文字がだんだん大きくなります。

だんだん大きく2(繰り返し)

文字がだんだん大きくなる動作を繰り返します。

だんだん大きく3(複数メッセージ対応 / 繰り返し)

上記の複数メッセージ対応版です。

マウス追跡1(クリックで静止)

文字がマウスを追跡します。クリックすると追跡を止めます。不具合を修正しました。

マウス追跡2(ゆっくり追跡 / クリックで静止・文字変更)

文字がマウスにゆっくりと近づきます。(^-^) クリックすると追跡を止め、表示文字が変更されます。(-_-)zzZ

マウスで移動(ドラッグ&ドロップ)

マウスでドラッグすると文字をウィンドウ内の好きな場所に移動することができます。

※ Mozilla 1.3 以降では動作しないようです。

※ これらのサンプルは IE4 や NN4 などの古いバージョンでも使えます。(ただし、JavaScript で 2バイト文字(日本語など)を解釈できない NN4 の古いバージョンを考慮していません。)

※ Mozilla 1.0.x 以上でも動作するように修正しました。Opera でこのサンプルを見る場合にはステータスバーを表示させなければなりません。動作しません。Opera はバージョンによっては動作しない場合があるようです。(例えば Opera 7.11)

スクロール1 … ステータスバー

ステータスバーの上を文字がスクロールします。

スクロール2 … ステータスバー(複数メッセージ対応)

上記のサンプルの複数メッセージ対応版です。

1文字ずつ表示1 … ステータスバー

ステータスバーの上に文字が1文字ずつ表示されます。

1文字ずつ表示2 … ステータスバー(複数メッセージ対応)

上記のサンプルの複数メッセージ対応版です。

1文字ずつ流れてくる … ステータスバー

ステータスバーの上に文字が1文字ずつ流れてきます。

フォーム部品関連

タイトルはフォーム部品関連ですが、DOMを使用すれば、FORM要素なしでも文字を動かすことができます。(FORM要素を使用したサンプルも用意しました。)

※ FORM要素を使用したサンプルは IE4 や NN4 などの古いバージョンでも使えます。(ただし、JavaScript で 2バイト文字(日本語など)を解釈できない NN4 の古いバージョンを考慮していません。)

スクロール1 … テキストボックス

テキストボックス内の文字がスクロールします。

スクロール2 … テキストボックス(複数メッセージ対応)

上記のスクロールtextbox1の複数メッセージ対応版です。

1文字ずつ表示 … テキストボックス

テキストボックス内の文字が1文字ずつ表示されます。

スクロール … ボタン

ボタンに表示される文字がスクロールします。
→参考:MARQUEEでは…

現在時刻を表示(テキストボックス)

テキストボックスに現在時刻をリアルタイムに表示します。DOMを使用したサンプルとFORM要素を使用したサンプルを用意しました。FORM要素を使用したサンプルはIE4やNN4などの下位バージョンでも使えます。

現在時刻を表示(ブラウザ画面上)

ブラウザ画面上に現在時刻をリアルタイムに表示します。

タイマー

指定した時間を測ることができます。1〜59分の範囲内で時間を指定することができます。指定した時間が経過すると時間切れのメッセージを表示します。

新たに生成されたウィンドウそのものを動かします。うっとうしい? (^ ^;

ブラウザ上で文字を動かすのと同様にいろいろなことが実現できる … と思ったのですが、実際にはいろいろと制約ありました。例えばNetscape や Mozilla ではウィンドウを画面の有効範囲内にしか配置できないようです。

スクロールするウィンドウ

子ウィンドウがスクロールしながら左右往復します。

点滅するウィンドウ

子ウィンドウが点滅します。点滅と言っても実際には子ウィンドウが前面に出たり、背後に隠れたりを繰り返しているだけですが … 。
※ IE5.5やNN4.7では動作しましたが、Mozilla (Netscape 6, 7系)ではバージョンによって動作するものとしないものがあるようです。Mozilla 1.0.2 (Netscape 7系相当)は動作しました。

上記のサンプルが動作しない Mozilla でも動作するサンプルを作りました。

点滅する文字

Netscapeでしか実現できなかった点滅(BLINK)する文字もJavaScriptを使えばこのように…。(^ ^)

1文字ずつ表示

1文字ずつ表示されます。文字列の中にHTMLタグを入れても時間的な間があきません。

※ 比較的最近のバージョンの Mozilla ではちらつきが発生するようです。

文字の色が次々と変化

文字の色が次々と変化します。色の種類、変化するスピードを自由に設定可能です。

順番に1文字ずつ色が変化

文字の色が順番に1文字だけ変化しながら流れていきます。色や変化するスピードを自由に設定可能です。

※ 比較的最近のバージョンの Mozilla ではちらつきが発生するようです。

ネオンサイン風(1文字ずつ表示 / 点滅 / 色変化 …)

あの夜の町を彩るネオンサイン風の表示板を作ってみました。(^ ^)  色や動作の回数、速さを調節することができます。