メッセージ

2010年11月25日の記事

2010/11/25(木)javascript なクロスフェード表示

2017/10/12 4:13 ソフトウェア開発日誌・技術
表示が切り替わるときに、新旧の内容が交差するような感じでゆっくりと切り替わるようなものを「クロスフェード表示」といいます。
音楽でも曲が入れ替わる時に使う常套手法です。

散々既出ですが、メモ代わりということで、、
提供時期は少し古いですが、最新のIE8,Firefox 3.6,Chrome で動作確認しました。

先ず、クロスフェード Javascript をダウンロード し、Ｗｅｂサーバにアップロード。

次に、対象がある HTML ファイルに以下の一文を <head> - </head> の間に追記。
<script type="text/javascript" src="bsn.Crossfader.js"></script>


次に、実際にクロスフェードさせたい内容を記述。
<span id="disp1">文字列１</span>
<span id="disp2">文字列２</span>
<span id="disp3">文字列３</span>

<div> 要素を使う説明が多いらしいですが、id 属性が付与できる要素であれば、何でもいいようです。
最後に、上記記述を行った直後の位置に、以下のような記述を行います。
<script type="text/javascript">
  var cf = new Crossfader( new Array('disp1' , 'disp2' , 'disp3'), 1800, 4500 );
</script>


外部ファイルにしても良いです。
最後の２つの数値はフェードエフェクトの時間と、要素の表示時間の設定です。
この例だと、
* フェードエフェクトの時間 ： 1800ms
* 各要素の表示時間 ： 4500ms

のようになります。
まぁ、特定の要素だけ長く表示するようなことは、スクリプト改造でもしないと出来ません。あとはお好みで。
コメント（0件）