写真のギャラリーページなど、たくさんの画像が一覧となって並べられているページでの
ページロード時に画像が一枚ずつ順番にフェードインしながら表示される演出技法。
一度に全ての画像がフェードインするよりも
滑らかな読み込みアニメーションを演出することができます。
この画像（コンテンツ要素）が順番にフェードインしながら表示する演出を
jQueryを使って簡単シンプルに実装する方法を紹介してみます。
jQueryで画像などコンテンツ要素を順番にフェードインさせる方法
まずは動作のサンプルから。
下記画面の「リロード」を押してみてください。
ページの読み込みが終わると
一覧画像が左上から順々にフェードインして表示されます。
この全体構成について、
まずはHTMLから。
◆HTML <ul> <li><a href="#"><img src="img/photo1.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo2.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo3.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo4.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo5.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo6.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo7.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo8.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo9.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo10.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo11.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo12.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo13.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo14.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo15.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo16.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo17.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo18.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo19.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo20.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo21.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo22.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo23.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo24.jpg" alt="" /></a></li> <li><a href="#"><img src="img/photo25.jpg" alt="" /></a></li> </ul>
サンプルではソースもシンプルにするために
単純なリストで画像を25個ほど並べています。
画像一つ一つはリスト＜li＞で囲っており、
実際はこのリスト＜li＞一つ一つをフェードインさせる構成になります。
そしてこのHTMLソースに対してのCSSは以下の様に。
◆CSS
ul {
margin: 0 auto;
width: 550px;
text-align: left;
}
ul li {
margin: 5px;
width: 100px;
text-align: left;
float: left;
display: none;
overflow: hidden;
}
/* =======================================
ClearFixElements
======================================= */
ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
ul {
display: inline-block;
overflow: hidden;
}
順々にフェードインさせることになる
リスト＜li＞はCSS側で「display:none」を入れておく必要があります。
その他は特に重要な項目もなく、
サンプル画面用のレイアウトを形成する内容になっています。
そして実際の動作実行用のスクリプトは以下の様になります。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
$(window).load(function(){
var delaySpeed = 100;
var fadeSpeed = 1000;
$('ul li').each(function(i){
$(this).delay(i*(delaySpeed)).css({display:'block',opacity:'0'}).animate({opacity:'1'},fadeSpeed);
});
});
});
</script>
jQueryのエフェクト「.delay()」を使って
画像（コンテンツ要素）の読み込み時間を遅延させます。
「.delay()」後は「.fadeIn()」などを使ってフェードインさせる方法で可能ですが
「.animate()」を使うようにしておくと、フェード処理以外の演出も簡単に追加することができるので
あえてこの形にしてあります。
スクリプト開始部分にある
—————————————
var delaySpeed = 100;
var fadeSpeed = 1000;
—————————————
は上から
—————————————
・読み込みの遅延時間
・表示時のアニメーション（フェード）時間
—————————————
となっているので、
ここの値を変更することでそれぞれスピードなど調整することが可能です。
この様に「.delay()」エフェクトを使うことで簡単シンプルに
一覧画像を順々に読み込ます演出を簡単に実装することができるようになります。
ギャラリーページやポートフォリオページなどの一覧画面で是非。。。