Basic Animation -relative-

タグがアニメーションして登場します。複数のパターンをサポートしています。このプログラムは、相対座標(position:relative)におけるアニメーションです。座標などを考えずに、気軽にアニメーションを行いたい時はこのスクリプトをお使い下さい。

デモでは文字のアニメーションですが、 IDとスタイル設定を行ったタグであれば画像なども動かせます。

Demo:

Source:

Advice:

設置手順

スクリプトを設置後、動かしたいタグに対してIDとスタイル(position:relative; visibilit:hidden)を設定します。そして、スクリプトソースの中にある、function initBARelative() { .... } の間に、 startBARelative() という命令を書いて下さい。(*1参照)

例えばタグを３つ用意して、それぞれに"text1""text2""text3"というIDを付けた場合以下のように書きます。

function initBARelative() {
  startBARelative('text1', 'flyBottom',100,15);
  startBARelative('text2', 'spiral',100,15);
  startBARelative('text3', 'flyTop',100,15);
}

なお、対象タグが<DIV>,<SPAN>以外ですとNetscape4.0では動作しません。

(*1) 詳細

startBARelative(ID, pattern, timer, steps);

IDには動かしたいタグのIDを。patternはアニメーションのパターンを指定します（*2参照）。 timerはアニメーションの速度(半角数字)。stepsはアニメーションの移動割合です (半角数字)。stepsは数字が大きい程細かく動きます。

(*2) アニメーションのパターンについて

サポートしているアニメーションパターンは以下の通りです。

flyTop:上から
flyBottom:下から
flyLeft:左から
flyRight:右から
flyTopLeft:左上から
flyTopRight:右上から
flyBottomLeft:左下から
flyBottomRight:左下から
spiral:スパイラル曲線

Arrangement:

アニメーションのスケジュール再生 [サンプル]

指定の順番通りにアニメーションを行いたい場合は、以下のようにします。

リンクに触れたときに登場 [サンプル]

リンクに触れたときに登場するようにします。