クロスフェードを実装する為のCrossfader

Check このエントリーをはてなブックマークに追加

配布元：Brand Spanking New
ライセンス：Creative Commons:Attribution Share Alike

クロスフェードとは物がゆっくりと消えていきながら別の物が現れる処理のこと。
特定の要素をフィードアウトさせながら別の要素を表示する処理になります。

設置方法

bsn.Crossfader.jsをhead要素なので読み込みます。

<script type="text/javascript" src="/js/bsn.Crossfader.js"></script>

以下のように順番に表示したい要素に対して、それぞれidを振ります。(XHTMLの記述にはルールはありません。)

<ul>
<li id="pr1"><a href="#">テキストテキストテキスト</a></li>
<li id="pr2"><a href="#">テキストテキストテキスト</a></li>
<li id="pr3"><a href="#">テキストテキストテキスト</a></li>
<li id="pr4"><a href="#">テキストテキストテキスト</a></li>
<li id="pr5"><a href="#">テキストテキストテキスト</a></li>
</ul>

そして、その記述の後(body要素を閉じる直前などがお勧め)に以下のコードを記述します。

<script type="text/javascript">
 var cf = new Crossfader( new Array('pr1' , 'pr2' , 'pr3' , 'pr4' , 'pr5'), 500, 5000 );
</script>

クロスフェードしたい要素のidをnew Array内にカンマ区切りで記述してきます。

その後に今の要素から次の要素を表示する間隔(ミリ秒)とその要素を表示する間隔(ミリ秒)を記述します。間隔についてはいろいろな数字を入れながら間隔をつかんでいくと良いでしょう。

サンプル

クロスフィード用に用意した要素は、positionがabsoluteを適応されて、通常のレンダリングフローより切り取られます。

前後の要素にmarginを使う、親要素にheightを適応するなどして表示するスペースを確保する必要があります。

複数のバナーなどを配置し、ごちゃごちゃしそうなときには便利なjsライブラリですね。

スポンサードリンク

コメント

カテゴリー：クロスフェード ライブラリ