トランジション

ページ移動のトランジションを指定するには、<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 でさらに強化されているようです。効果の種類やパラメータが増えたり、自作の効果を組みこんだりなど・・・詳細は下記の参考情報を参照してください。

トランジションとは

ページ間トランジション

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

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

参考情報