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

WWW WATCHさんでクロスフェードを実装する為のCrossfaderが紹介されていたので使ってみました。

クロスフェードとは物がゆっくりと消えていきながら別の物が現れる処理のこと。

右メニューの『姉妹サイト』のバナーを見ていただいたら分かると思うのですが、webページの場合は要素をフィードアウトさせながら別の要素を表示する処理になります。

ライセンス形態はCreative Commonsの『Attribution』『Share Alike』で公開されていますので『著作権形態』と『派生後のライセンス形態』にさえ気を使えば自由に使用できます。

使い方

配布元のBrand Spanking Newよりcrossfaderをダウンロードします。(執筆時は1.3が最新バージョン)

ダウンロードしたファイルを解凍すると中にbsn.Crossfader.jsが存在しますので、そちらをサーバーにアップしてscript要素を使ってwebページ内に取り込みます。

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

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>

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

そして、その記述の後(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ライブラリですね。

関連エントリー

ページ内リンクをスマートにするsmoothScroll.js
ie以外でもクリップボードが使えるsetClipboard.js
一番簡単な画像置換の方法-imageReplace.js-
アルファ画像を扱うalphafilter.jsライブラリ
Lightboxを使い画像を拡大表示する。
角丸javascriptライブラリ『curvyCorners』を使ってみる
吹き出し方式のツールチップテキスト作成JavaScriptライブラリ

スポンサードリンク

«[書評]変革期のウェブ | メイン | ブロックレベル要素の高さを揃えるheightLine.js»