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

クチコミサイト構築「エディタ・エンタープライズ」
デモサイトトップ
制作技術
[チュートリアル]Javascriptで画像などの要素を順番にフェードさせ表示する

クチコミサイト構築「エディタ・エンタープライズ」デモサイト

日本初のブログ自動収集システム「エディタ・エンタープライズ」により、簡単・低コスト・SEO対策が可能な口コミサイトが構築可能です。
ブロガー別の記事一覧やカテゴリ別、月別、取得画像別などさまざまな切り口で見せることができるので、映画や商品のキャンペーンをはじめ、テーマ別のポータルサイトを構築できます。

2010年07月27日｜記事提供：すくえあ

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

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

また、画像部分の記述もわかりやすく書くと下記のようになります。


	要素1
	要素2

さて、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で画像などの要素を順番にフェードさせ表示する - サンプル

[ 元記事 ]

twitterにつぶやく｜はてなブックマーク｜この記事をクリップ！｜ Yahoo!ブックマークに登録｜ del.icio.usに追加する