Basic Animation -absolute-

Description:

基本的なアニメーションです。複数のパターンをサポートしています。
このプログラムは、絶対座標(position:absolute)におけるアニメーションです。 ポジションなどが予め考えられている場合にご利用下さい。

Demo:

デモを見る

Source:

Advice:

Netscape4.0でも動かしたい場合は、<DIV>タグか、<SPAN>タグをお使い下さい。

●setBasicAnimationRelative(ID, pattern, timer, steps, ex, ey);
IDには動かしたいタグのIDを。patternはアニメーションのパターンを指定します。 timerはアニメーションの速度。stepsはアニメーションの変化割合です。 exは、最終的に収まるタグのx座標で、eyはそのy座標です。

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

Arrangement:

●アニメーションの簡易タイムスケジューラーについて。
このプログラムでは、各要素ごとに順番にアニメーション表示する事が可能です。 スケジュール通りに表示させたい場合は、<SCRIPT>タグの中に新たに書き加える必要があります。
  var animschedule = new Array();

上記の行の下を、以下の様に書き加えます。

var animschedule = new Array();
animschedule[0] = "extitle,moveBottomRight,100,25"
animschedule[1] = "text1,moveBottom,100,20";
animschedule[2] = "text3,moveTop,100,15";
animschedule[3] = "text2,spiral,100,20";

animschedule[X]のXを一つずつ大きくして行きながら、アニメーションの情報を書いていきます。 (中身の記述方法は、setBasicAnimationRelative()と一緒です)。 アニメーションは[X]の数字が小さい順に実行されます。

上記の様に書き換えた後最後に、 function init() { .... } の間に
  BasicAnimationSchedular();
と一行書き加えればOKです。

Browser:

Internet Explorer4.0以上
Netscape Navigator4.0以上