【フェーダー】画像の表示・非表示にプラグインを利用【jquery.waypoints.min.js】

jQueryプラグインのjquery.waypoints.min.jsを利用します。特定の要素に対し、ブラウザの縦方向の画面位置を指定して上方向のスクロールと下方向のスクロールに分けて処理が実行できます。下方向のスクロールでは画像を順番にフェードイン、上方向のスクロールでは画像を非表示にする、イメージフェーダーのサンプルです。

サンプルデモはこちら

htmlのコードは下記になります。
画像を格納するdivタグにclass=”fade_image″を、フェードインさせる画像のimgタグにclass=”element”を付与します。

<p class="fade_title">フェーダーデモ</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<div class="fade_image">
	<img class="element" src="fade01.jpg" alt="">
	<img class="element" src="fade02.jpg" alt="">
	<img class="element" src="fade03.jpg" alt="">
	<img class="element" src="fade04.jpg" alt="">
</div>

続いてCSSのコードです。
フェードインさせる画像はFlexboxで横並びにしています。また、opacityに0を指定して透明にしておきます。

.fade_image {
	display: flex;
	margin: 0 0 3em;
}
.fade_image img {
	width: 24%;
	height: auto;
	margin: 0 8px 0 0;
}
.fade_image img:last-child {
	margin: 0;
}
.element {
	opacity: 0;
}
@media screen and (max-width: 640px) {
	.fade_image {
		flex-wrap: wrap;
		flex-direction: column;
	}
	.fade_image img {
		width: 100%;
		margin: 0 0 10px 0;
	}
	.fade_image img:last-child {
		margin: 0;
	}
}

最後にjQueryのコードです。
クラス名fade_imageのdivタグは複数設置するため、対象のdivタグを変数activePointに代入して対象の画像が指定できるようにします。direction === ‘down’で下方向スクロール時の処理、elseで上方向スクロール時の処理を記述しています。最後のoffset : ‘80%’が画面位置の指定になります。この場合、画面の上から80%の位置が画像のフェードイン・フェードアウトの切り替え位置になります。

$(function() {
	var delaySpeed = 200;
	$('.fade_image').waypoint(function(direction) {
		var activePoint = $(this.element);
		if (direction === 'down') { //scroll down
			$(activePoint).children('.element').each(function(i){
				$(this).delay(i*(delaySpeed)).queue(function(){
					$(this).stop(true, true).animate( { opacity: 1 }, { duration: 500 });
				});
			});
		}
		else{ //scroll up
			$(activePoint).children('.element').stop(true, true).animate( { opacity: 0 });
		}
	},{offset : '80%'});
});
タイトルとURLをコピーしました