« JavaScriptでプルアップメニューっぽくスライド表示 | トップページ | RSS Feed をHTMLページに組み込むCGI »

2009.02.18

JavaScriptでクロスフェード

DIV要素をクロスフェード

このところバタバタしておりまして…。ストックネタという訳でもないんですが、今回はかなり定番の結構便利なスクリプトを紹介してみます。
「Flashを使うまでもないんだけど、ちょっとした演出が欲しい…」という時などにはうってつけです。

Brand Spanking New」で紹介されている「Crossfader.js」というスクリプトです。ご存知の方も多いかもしれないですね。
このスクリプトの優れている所は、画像ではなくDIV要素に対してクロスフェードさせられるトコロです。…なので、使い方を工夫すれば、いろいろと凝ったアプローチができると思います。しかも、設置は至って簡単!使わない手はないでしょう。

とりあえず、サンプルです。

↑このデータはこちらからダウンロードできます。

だいたいはソースを見てもらえば分かると思いますが、
クロスフェードさせたい項目ごとに<div>で囲み、id属性(cf1,cf2…のように)を付けます。

次に、html上に下記のようなスクリプトを記述します。
<script type="text/javascript">
window.onload = function() {
var cf = new Crossfader( new Array('cf1','cf2','cf3', 'cf4', 'cf5'), 500, 2000 );
}
</script>
※この時、500はフェードエフェクトの時間、
2000は各<div>の表示時間になるので、適宜変更して下さい。

あとは、CSSで<div>の幅と高さ、中身のコンテンツなどを調整をして下さい。

|

« JavaScriptでプルアップメニューっぽくスライド表示 | トップページ | RSS Feed をHTMLページに組み込むCGI »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/44092846

この記事へのトラックバック一覧です: JavaScriptでクロスフェード:

« JavaScriptでプルアップメニューっぽくスライド表示 | トップページ | RSS Feed をHTMLページに組み込むCGI »