MISTY-NET JavaScript講座 HOME / ご利用について / リンクに関して / 推奨環境 / 免責・規約 / お問合せ / リンク集 / Q&A
安心・高速・低価格!ホスティングサービスはミスティーネットへ!

JavaScript 入門編

JavaScript 活用編

ラブラブメールでツーショット

人気サイトランキング


   HOME
■ ページのフェードイン(徐々に現れるページ)

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



サンプルスクリプト


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


- - サンプルページ - -





スクリプトの説明

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

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

[ フェードイン関数 ]
// タイマ変数初期化
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 を透過値の値として指定しています。
   この変数の値を変更していくことで透過度を変えていきます。





Copyright (C) since 2004 有限会社ミスティーネット All Rights Reserved .