< 文字列のトランジション効果
　HOME 　>>> 　HTML整理ノート 　>>> DHTML -- 基本編　　　応用編

文字列のトランジション効果

(各トランジション名をクリックすれば...）

Box In

Box Out

Circle In

Circle Out

Wipe Up

Wipe Right

Horizontal Blinds

Checkerboard Across

Random Dissolve

Split Vertical In

Split Vertical Out

Split Horizontal In

Strips Right Down

Random Bars Vertical

Box In (ID=0)
・背景要素が外側から内に向かい拡大し、前景要素は小さな四角形に縮小し消え ていく。

Box Out (ID=1)
・背景要素が中心から拡大していき、最後は前景要素を消してしまう。

Circle In (ID=2)
・背景要素が外側から内に向かい拡大し、前景要素は小さな円形に縮小し消えていく。

Circle Out (ID=3)
・背景要素が中心から円状で拡大していき、最後は前景要素を消してしまう。

Wipe Up (ID=4)
・背景要素が下から上に伸び、前景要素を消していく。

Wipe Right (ID=6)
・背景要素が左から右に伸び、前景要素を消していく。

Horizontal Blinds
(ID=9)
・横のブラインドで消していく

Checkerboard Across
(ID=10)
・市松模様の格子状に消していく

Random Dissolve (ID=12)
・前景要素のピクセルがランダムに選択され、背景要素のピクセルに置き換えられていく

Split Vertical In
(ID=13)
・背景要素が左右から現れ、中央に向かい閉じるように狭まり、前景要素を消し ていく。

Split Vertical Out
(ID=14)
・背景要素が中央から現れ左右に広がるよに拡大し、前景要素を消していく。

Split Horizontal In
(ID=15)
・背景要素が上下から現われ中央に広がるよに拡大し、前景要素を消していく。

Strips Right Down
(ID=19)
・背景要素が左上隅から現れ、右下隅に向かい拡大し前景要素を消していく

Random Bars Vertical
(ID=22)
・ランダム幅の垂直線が前景要素を置き換えていく。

　

　

　

　

　

　

　

　

　

　

　

　

　

　

Sample Source......................................................................>>>

<style TYPE="text/css"><!--
    .tran {width:160;height:20;background:pink;color:blue;cursor:hand}
    .txt {width:300px;height:80px;font-size:18;visibility:hidden;
        background:yellow;color:black}
--></style>
<script language="JavaScript"><!--
function ShowTran(n){
    if (n.filters.revealTrans.Status == 0){
        n.filters.revealTrans.Apply();
        n.style.visibility = "visible";
        n.filters.revealTrans.Play();
    }
}

function HideTran(n) {
    n.style.visibility = "hidden";
}
//--></script>
</head>

<body>

<div class="tran" style="position: absolute;left:20;top:50;"
    onclick="ShowTran(boxin)"onMouseout="HideTran(boxin)">
    <p>Box In</p></div>
<div class="tran" style="position: absolute;left:20;top:80;"
    onclick="ShowTran(boxout)" onMouseout="HideTran(boxout)">
    <p>Box Out</p></div>

    ･･･(以下省略)･･･

<div id="boxin" class="txt"
    style="position: absolute;left:200px;top:50px;
    filter:revealTrans(duration=1.0,transition=0)">
    <p>Box In (ID=0)<br>・背景要素が外側から内に向かい拡大し、
    前景要素は小さな四角形に縮小し消え ていく。</p></div>
<div id="boxout" class="txt"
    style="position: absolute;left:200px;top:70px;
    filter:revealTrans(duration=1.0,transition=1)">
    <p>Box Out (ID=1)<br>・背景要素が中心から拡大していき、
    最後は前景要素を消してしまう。 </p></div>

    ･･･(以下省略)･･･

end(最終更新:12/11/16)