NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

スクロールしていって指定した要素が現れた時、その子要素を順番にフェードイン表示させることができる「jquery-scrollInTurn.js」

2015年2月10日jQueryプラグイン活用

スクロールしていって指定した要素が現れた時、その子要素を順番にフェードイン表示させることができる「jquery-scrollInTurn.js」

「jquery-scrollInTurn.js」は、スクロールしていって指定した要素が現れた時、その子要素を順番にフェードイン表示させることができます。
スクロールして指定要素より上に戻った時、再びフェードイン表示させる・させないの指定も可能です。

デモページ

JavaScript

(function($){
	$(function() {
		$('#parent').scrollInTurn({
			selector: '.child',
			delaySpeed: 100,
			fadeInSpeed: 300,
			fadeOutSpeed: 300,
			easing: 'linear',
			delayHeight: 50,
			fadeOutEvent: true
		});			
	});
})(jQuery);

HTML

<div id="contents"><p>↓scroll<br>↓scroll<br>↓scroll</p></div>
<div id="parent">
	<p class="child">child</p>
	<p class="child">child</p>
	<p class="child">child</p>
</div>

CSS

#contents {
	text-align: center;
	height: 1200px;
}
#parent {
	border: 1px solid #ffbc30;
	width: 640px;
	padding: 30px;
	margin: 0 auto 160px;
	text-align: center;
}
#parent .child {
	background-color: #ffbc30;
	color: #ffffff;
	padding: 15px 20px;
	margin-bottom: 15px;
}
#parent .child:last-child {
	margin-bottom: 0;
}

配布元

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. スクロールしていって指定した要素が現れた時、その子要素を順番にフェードイン表示させることができる「jquery-scrollInTurn.js」

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com