PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

【JavaScript】 クロスフェード(jQueryのプラグイン)

jQueryプラグインクロスフェードを使うことで、フェードして置換する事ができます。

 

jQueryの適応方法

jQueryをヘッドで読み込ませます。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

 

クロスフェードプラグインを使う。

CSS Crossfader
上記のリンクからcrossfaderをダウンロードする。

htmlにプラグインを読み込ませます。場所はbodyの終了タグ前辺り。

<script src="js/bsn.Crossfader.js"></script>

 

置換を行う

置換を行うために、置換を行う要素にIDをつけておきます。

例:
 
html

<ul id="img_fader">
<li id="img1"><img src="img/ph01.jpg" alt=""></li>
<li id="img2"><img src="img/ph02.jpg" alt=""></li>
<li id="img3"><img src="img/ph03.jpg" alt=""></li>
<li id="img4"><img src="img/ph04.jpg" alt=""></li>
</ul>

 
JavaScript

<script>
  var cf = new Crossfader( new Array('img1', 'img2', 'img3', 'img4'), 2000, 3000 );
</script>

2000は指定した要素のフェード時間、3000は要素の表示時間。

ここでは画像を使っていますが、画像以外(pなど)の置換も行う事ができます。