以前、「div要素をクロスフェード表示する JavaScript」 として紹介した 「Javascript / CSS Crossfader」 を実際に当サイトで使用したので、ひとつの使用例として公開したいと思います。
といっても普通に使っているだけで特に変わったことをやっているわけではないのですが、前回紹介した際に div 要素をクロスフェードすると書いたので div 要素専用っぽい説明になっていましたが、実際は div 要素以外でも使用することができるので、その辺も合わせて説明を。
実際に使用しているものは、サイドメニュー部分に設置してありますのでそちらを参考に。では実際の使用方法です。
2007/12/14 追記
サイトリニューアルでサンプルとなるバナーは撤去してしまいました。
まずは JavaScript ファイルをダウンロードして、文書に読み込んでおきましょう。
<script type="text/javascript" src="/js/bsn.Crossfader.js"></script>
XHTML ソースは下記のように。不要な部分は削除したり変更したりしています。
<ul> <li id="bnr_1"><a href="./"><img src="./bnr_1.png" alt="Sample 1" /></a></li> <li id="bnr_2"><a href="./"><img src="./bnr_2.png" alt="Sample 2" /></a></li> <li id="bnr_3"><a href="./"><img src="./bnr_3.png" alt="Sample 3" /></a></li> <li id="bnr_4"><a href="./"><img src="./bnr_4.png" alt="Sample 4" /></a></li> <li id="bnr_5"><a href="./"><img src="./bnr_5.png" alt="Sample 5" /></a></li> </ul>
今回は、ul 要素というか正確には li 要素をクロスフェードさせる感じです。Javascript / CSS Crossfader では、任意の id 属性を付けてその id 属性値をキーにクロスフェード処理を適用します。
id 属性を付けたら下記のように JavaScript を書いてあげます。場所はバナーの (X)HTML より後で。
<script type="text/javascript">
var cf = new Crossfader( new Array('bnr_1' , 'bnr_2' , 'bnr_3' , 'bnr_4' , 'bnr5'), 500, 7200 );
</script>
外部ファイルにして読み込んでも OK。最後の数字はフェードエフェクトの時間と各要素の表示時間の設定です。今回の例だと、
- フェードエフェクトの時間 ： 500ms
- 各 div 要素の表示時間 ： 7200ms
となります。あとはお好みで。
注意点としてはクロスフェード対象の要素の後に、何か要素を配置する場合。スクリプトの中身を見れば分かりますが、クロスフェードの対象にした要素は CSS によって position: absolute されて重なっている状態になっていますので、そのままだとこれに続いて配置された要素がクロスフェード要素と重なってしまいます。なので、続く要素にはクロスフェード要素の高さ分の margin-top を指定するなどして調整しましょう。
ということで後は色々試してみてください。面白い使い方もあるかも。
