[チュートリアル]JavaScriptで画像などの要素を順番にフェードさせ表示する

まずはフォトグラファー 木村 隆宏さんのサイトを御覧ください。
こちらのサイトでは、アクセス時にポートフォリオを順番にフェードさせることで非常に印象的となっています。
今回はこちらで使用しているJavaScriptをのぞきながら、どう実現しているのかを見ていきたいと思います。
[チュートリアル]JavaScriptで画像などの要素を順番にフェードさせ表示する - サンプル

使用方法
フォトグラファー 木村 隆宏ではJavaScriptライブラリjQueryを利用し、fade.jsでフェードを制御しています。
該当部分を抜粋し、汎用的に書き換えたのが以下となります。

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>	
<script type="text/javascript">
$(function(){
	$('.fade li').hide();
});

var i = 0;
var int=0;

$(window).bind("load", function() {
	var int=setInterval("doFade(i)",100);
});

function doFade() {
	var list = $('.fade li').length;
	if (i >= list) {
		clearInterval(int);
	}
	$('.fade li').eq(i).fadeIn(1000);
		i++;
}
</script>
また、画像部分の記述もわかりやすく書くと下記のようになります。
<ul class="fade">
	<li>要素1</li>
	<li>要素2</li>
	<!-- 以下要素分 -->
</ul>
さて、js部分を順に説明をしていきます。
$(function(){
	$('.fade li').hide(); //.fade liの要素をすべてhideする
});
上記により、要素がいったん非表示の状態となります。

var i = 0;
var int=0;

$(window).bind("load", function() { //ページが読み込まれたとき
	var int=setInterval("doFade(i)",100);  //関数doFadeを100ミリ秒ごとに実行
});
後述するdoFadeという関数を一定間隔ごとに実行させるように、setIntervalを利用しています。
参考:setInterval/JavaScriptリファレンス


function doFade() { //関数doFadeです
	var list = $('.fade li').length; //要素の数を確認
	if (i >= list) { //要素の数に達したとき
		clearInterval(int); //setIntervalを解除します
	}
	$('.fade li').eq(i).fadeIn(1000); //要素を1000ミリ秒ごとにフェードインさせる
		i++;
}
このように記述することにより、印象的な見せ方をさせられます。
[チュートリアル]JavaScriptで画像などの要素を順番にフェードさせ表示する - サンプル

sponsors

「[チュートリアル]JavaScriptで画像などの要素を順番にフェードさせ表示する」をシェアする

記事作成:
記事URL:

TOP > > > [チュートリアル]JavaScriptで画像などの要素を順番にフェードさせ表示する