ミスティーネット･JavaScript講座

■ ページのフェードイン（徐々に現れるページ）

InternetExplorer のみの機能ですが、スタイルシートのフィルター機能によりオブジェクトの透明度を指定することが出来ます。この透明度をコントロールすることで、徐々にページが表示されていくような効果を演出します。

サンプルスクリプト

「開始」ボタンを押すと徐々にページが表示されていきます。
実際にどのような感じになるか確認してみてください。
(* InernetExplore のみ有効な機能です)

- - サンプルページ - -

スクリプトの説明

ページのフェードイン効果を出すためにスタイルシートの「filter」機能を使用しています。
filter 機能にはいろいろな機能がありますが、その中の「alpha オプション(透明度の指定)」を使用します。
alpha オプションでは０(不透明)～１００(透明)までを数値で指定します。
始めにスタイルシートの設定でページ全体の透明度を０に指定しておきます。これでページを読み込んだときには表示されない状態になっています。
次に、この透明度の指定を JavaScript を使って１００まで段階的に変化させていきます。
すると徐々にページが表示されていきます。

これとは逆に、alpha オプションの値を１００から０へと変化させていくとフェードアウトの効果を演出することが出来ます。

[ フェードイン関数 ]

// タイマ変数初期化
timerID = null;

// 透明度の初期値
var clarity = 0;

// 透過の間隔
var interval = 5;

// 透過スピード
var speed = 200;

function fadeIn() {

  // 透過値の値を上げる
  clarity += interval;

  // 透過値の設定
  document.getElementById('contents').filters["alpha"].opacity = clarity;

  // タイマーの初期化
  clearTimeout(timerID);

  // 透過値の値が100になるまで繰り返す
  if (clarity < 100) {
    timerID = setTimeout("fadeIn()", speed);
  }
}

タイマー機能を使用して関数を再読み込みすることで、段階的に透過値を変更して透明度を上げていっています。

黄色の部分が透過値の値を設定している部分です。

<透過を設定する ID の指定部分>
document.getElementById('contents')
   サンプルではページを1つのテーブルで囲み、そのテーブルのIDを「contents」に指定しています。

<透過値の設定部分>
filters["alpha"].opacity = clarity
   上記の指定方法で透過値を指定することが出来ます。
   ここでは変数 clarity を透過値の値として指定しています。
   この変数の値を変更していくことで透過度を変えていきます。

▲TOPへ


	HOME / ご利用について / リンクに関して / 推奨環境 / 免責･規約 / お問合せ / リンク集 / Ｑ＆Ａ