写真をきれいに順番にフェードインさせて表示させたかったので、色々スクリプトを探していたら、すごくお手軽に実装できそうなスクリプトを見つけたので、ご紹介します。(jQueryは読み込んでおく必要があります)
お手軽に実装できるって、良いですよね!
読み込むファイルも少なくて済みますし。
【サンプル】
【HTML】
<ul class="sample"> <li><img src="sample.jpg"></li> <li><img src="sample.jpg"></li> <li><img src="sample.jpg"></li> <li><img src="sample.jpg"></li> <li><img src="sample.jpg"></li> <li><img src="sample.jpg"></li> </ul>
【JavaScript】
[JS]
$(function(){
// リストを非表示
$(‘ul.sample li’).hide();
// 繰り返し処理
$(‘ul.sample li’).each(function(i) {
// 遅延させてフェードイン
$(this).delay(500 * i).fadeIn(1000);
});
});
[/JS]
「ul.sample li」の箇所に、フェードイン表示させたい要素を指定するだけ。
今回の場合だと、ul.sample(親)内のli(子)を指定しています。
liタグでなくても使用できます。
親をdivにして、子をdlにしたりとか。
お手軽なコードゆえに、使いどころも考える必要はあります。
現状のコードは、ページを開くと同時に実行されるので、ファーストビューに配置されていないと、スクロールする頃には全部表示されてしまっています。
(スクロールすると次々フェードインしてくるアレとはちょっと別物なので)
今回のスクリプトは、フォトギャラリー的なページでの使用だったので問題ないのですが。
むしろそうだったので、あえて簡易的なスクリプトを探しました。
あまり複雑なスクリプトは使いたくない、JavaScriptとかあんまりわかんないな、といった時におすすめです。
参照させていただいたサイト
http://www.dataplan.jp/blog/jquery/203