site_make

フェードインギャラリー

2015-01-22

フェードインギャラリーとは

fadeIn

フェードしながらイラストが入れ替わっていくギャラリーです。定番ですよね~
いろんな方がネットでも作り方を説明していますので今更な感じはありますが私の場合はイラストギャラリーですからねぇ、ちゃんと「止めて「見る」ことができるのが大前提ですよ。動くことは余興ですからね。

フェードインサンプル

2秒ごとに順番に出て、マウスを乗せると止まります。サムネールをクリックするとイラストが入れ替わりますが、またマウスを退けるとそこから動き出します。

  • sam03
  • sam01
  • sam02
  • sam02
  • sam02
  • sam02

なんか前の記事の「よくないギャラリー」のときの回避サンプルにエフェクトを付けたような感じに見えますが、こっちは最初から見せる画像を置いておく必要があります。

html

htmlはいつもと変わりませんね。


<div>
	<ul id="thumbnail">
		<li><a href=""></a>サムネール01</li>
		<li><a href=""></a>サムネール01</li>
		<li><a href=""></a>サムネール01</li>
	</ul>
	<div id="window">
		<ul>
			<li>見せるイラスト01</li>
			<li>見せるイラスト02</li>
			<li>見せるイラスト03</li>
		</ul>
	</div>
</div>

css

cssの必須記述です。サイズやレイアウトはお好みに合わせて設定して下さい。
ポイントは表示窓をposition:relative;で相対指定(ここが基準点に)とイラストの入っているliをposition:absolute;で左上にみんな重ねてしまいます。


#window {position:relative;}
#window ul li {posisition:absolute;top:0;left:0;display:none;}
#window ul li:first-child{display:block;}

javascript(lQuery)

これも少し長めになると感じる方もいるでしょうが、実は「スライダー(カルーセル)ギャラリー」と同じ部分が多いんです。


var num = 0;
var li = $('#window li');
move();

function fade(){
	li.eq(num).fadeOut().next().fadeIn();
	num++;
	if(num >= 3){
		li.eq(0).fadeIn();
		num=0;
	}
}

var interval;
function move(){
	interval = setInterval(fade,2000);
}

function st(){
	clearInterval(interval);
}

$('#window,#thumbnail').hover(function(){
	st();
},function(){
	move();
});

$('#thumbnail').find('li').click(function(){
	num = $(this).index();
	li.fadeOut();
	li.eq(num).fadeIn();
});

では、まず最初から説明していきますね。


var num = 0;
var li = $('#window li');
move();

ここはまず下準備ですね。numで移動をカウントします。意外とカウントしているといろんなアクションに応用が利きますので私は好きですね。
move();はとりあえず置いておいて勝手に動いてもらっています。


function fade(){
	li.eq(num).fadeOut().next().fadeIn();
	num++;
	if(num >= 3){
		li.eq(0).fadeIn();
		num=0;
	}
}

ここはイラストの動きの部分です。numの順番のイラストをfadeOut()フェードアウトさせてnext().fadeIn()で次のイラストをフェードインしてnumに+1しています。もし、numに+1したときにnumが3以上になったらnext()イラストがもうないので0番目のイラスト(javascriptは数の数え方が0が最初になりますよ)をフェードインしています。numも0に戻します。


var interval;
function move(){
	interval = setInterval(fade,2000);
}

function st(){
	clearInterval(interval);
}

ここはsetInterval()で2秒間隔で繰り返します。clearInterval()で繰り返しを止めます。という武器を作っておきます。move()とst()ですね。
スライダー(カルーセル)ギャラリー」の書き方と同じです。


$('#window,#thumbnail').hover(function(){
	st();
},function(){
	move();
});

hover乗ったら止めるst()。降りたら動くmove()。hover()関数は書き方が一つ目のfunctionは乗ったとき、二つ目は降りたときのアクションを書くのでちょっと特殊なイメージかもしれませんね。


$('#thumbnail').find('li').click(function(){
	num = $(this).index();
	li.fadeOut();
	li.eq(num).fadeIn();
});

最後にサムネールをclickしたらindex()で順番を取得してnumにします。他のイラストはフェードアウトさせてみたい画像(num番目)をフェードインさせます。
これで降りた時にnum番目からまた動き出すというわけですね。fadeOut(時間)、fadeIn(時間)などといろいろ細かく設定するとオリジナルな感じになるかもw
これはちなみにli.eq(num).fadeOut(500).next().delay(300).fadeIn(1000);
.delay()は遅らせる効果があります。

copyright 2017 eo
  プロフィール  PR:無料HP  湯沢自動車学校  ゲーム 制作  IID  中古ホイール 三重  タイヤ 格安  Webディレクター 専門学校  BATTLEZ  秩父自動車学校  水晶  長崎 合宿免許  音楽 専門学校 福岡  ランドクルーザー トヨタ 中古  リノベーションセミナー