kowaza MENU

アクセスアップには、ホームページ登録ドットコム
Click Here!
トランジション

トランジション





左に表した効果はDHTMLを使用して二枚の画像を特殊効果を使い入れ替えると
言った小技です、比較的短いスクリプトで見ている人には効果大です。
注意:IE4.0から対応 NNは未対応です。

早速下記にJavaScriptとHTMLを書き出しました、はじめに<head>〜</head>の
間にJavaScriptを記述します。

次に<body>〜</body>の間に実際の命令を記述します

<head>
<Script Language="JavaScript">
<!--

function gazou(){
	ga.filters.RevealTrans.Apply();
	ga.src="e_2.jpg" ←2番目に表示される画像を指定
	ga.filters.RevealTrans.Play();
	}

-->
</Script>
</head>

<body onload="gazou()">  ←関数をbodyにロードする

<img src="e_1.jpg" 
ID="ga" style="filter:RevealTrans(duration=5,transition=12)" 
width="200" height="266">
赤で囲まれた所に一枚目の画像を指定、黄色で囲まれた所を取り合
えずそのまま記述して保存、緑の所は画像のサイズです。 </body> </html>

こうして出来上がったHTMLファイルを見ると!見事一枚目の画像に1ピクセル毎、
二枚目の画像が重なっていく効果の出来上がり!!



線

これ以外にも0〜23種類の効果があります。

その効果の設定方法は、上の黄色の個所のtransition=12 この部分の12の数字を0〜23までの数字で設定!duration=5 この数字が大きいほどアクションが遅い、
逆に小さい程早い!

全部は紹介できないので取り合えず半分だけ(^^ゞ
フローティングフレームを使用しています、NNはサポートしていません。



トラジション0効果
トラジション2効果
トラジション4効果
トラジション6効果
トラジション8効果
トラジション10効果
トラジション14効果
トラジション16効果
トラジション18効果
トラジション20効果
トラジション22効果
トラジション23効果 23はランダムです何回も押してみて^^




線
共同コンテンツ:誰でも解る無料ホームページ作成講座
共同コンテンツ:今時のHP作り!
前へ 次へ PageTop