## トランジション

トップ > アラカルト > トランジション

#### ■ トランジションとは

トランジションはページ移動などにビジュアルな効果を与える機能です。IE4.0 でサポートされました。このページも IE4.0 以上で表示するといろいろな効果でページ表示されているのが分ると思います。再表示では実行されないので、[戻る] ボタンで戻って再度リンクをクリックしてください。

#### ■ ページ間トランジション

ページ移動のトランジションを指定するには、<head>〜</head> の間に下記のいずれかの <meta> タグを記述します。

    <meta http-equiv="Page-Enter"
          content="blendTrans(Duration=0.8)">

    <meta http-equiv="Page-Enter"
          content="revealTrans(Duration=0.8,Transition=23)">

Duration には効果完了までの秒数（最大30.0秒）を指定します。revealTrans() の場合は Transition で効果番号を指定することもできます。

    [blendTrans()の効果]

     固定 : フェードイン(Blend in)

    [revealTrans()の効果番号]

      0 : 外から中央に箱型(Box in)
      1 : 中央から外に箱型(Box out)
      2 : 外から中央に円形(Circle in)
      3 : 中央から外に円形(Circle out)
      4 : 下から上に(Wipe up)
      5 : 上から下に(Wipe down)
      6 : 左から右に(Wipe right)
      7 : 右から左に(Wipe left)
      8 : 縦縞模様に(Vertical blinds)
      9 : 横縞模様に(Horizontal blinds)
     10 : 格子模様横方向に(Checkerboard across)
     11 : 格子模様縦方向に(Checkerboard down)
     12 : 点画的にフェードイン(Random dissolve)
     13 : 左右から中央に(Split vertical in)
     14 : 中央から左右に(Split vertical out)
     15 : 上下から中央に(Split horizontal in)
     16 : 中央から上下に(Split horizontal out)
     17 : 右上から左下に(Strips left down)
     18 : 右下から左上に(Strips left up)
     19 : 左上から右下に(Strips right down)
     20 : 左下から右上に(Strips right up)
     21 : 横縞ランダム(Random bars horizontal)
     22 : 縦縞ランダム(Random bars vertical)
     23 : 0〜22の効果をランダムに(Random)

Page-Enter の部分には下記のいずれかを指定します。

    Page-Enter : このページに移動してくるとき
    Page-Exit : 他のページに移動するとき
    Site-Enter : このサイトに移動してくるとき
    Site-Exit : 他のサイトに移動するとき

#### ■ スクリプトによるトランジション

ページを開いた時（onLoad）やクリックしたとき（onClick）に、特定の画像に対してトランジションを適用することができます。

    <html>
    <head>
    <title>トランジションテスト</title>
    <script>
    <!--
    var img1 = new Image(); img1.src = "image1.gif";
    var img2 = new Image(); img2.src = "image2.gif";
    function doTrans(img, n) {
      if (img.filters) {
        img.filters.item(n).Apply();
        img.src = (img.src == img1.src) ? img2.src : img1.src;
        img.filters.item(n).Play();
      }
    }
    // -->
    </script>
    </head>
    <body>
    <img id="XX1" width=100 height=100 src="image1.gif" style="filter:
     blendTrans(Duration=1.0) revealTrans(Duration=1.0, Transition=3);">
    <input type="button" value="blend" onclick="doTrans(XX1, 0)">
    <input type="button" value="reveal" onclick="doTrans(XX1, 1)">
    </body>
    </html>

#### ■ トランジション使用上の注意

IE4.0 以降のブラウザ以外ではサポートされていません。

トランジションを始めてみたときは「おっ」と思いますが、あまり多用されると鬱陶しがられます。使用する際も Duration を「短すぎるかな」と思う程度、「ずずずっ」よりも「しゃかっ」程度の時間にするのがオススメ。

トランジションやフィルタ機能は、IE5.5 でさらに強化されているようです。効果の種類やパラメータが増えたり、自作の効果を組みこんだりなど・・・詳細は下記の参考情報を参照してください。

#### ■ 参考情報

- http://www.microsoft.com/japan/developer/library/jpisdk/dhtml/content/filters.htm
- http://msdn.microsoft.com/workshop/author/filter/filters.asp

Copyright (C) 2001 杜甫々
2001年6月17日
http://www.tohoho-web.com/wwwxx056.htm