「Bootstrap」テンプレートで特定位置までスクロールすると、要素がフワッと表示されるアニメーションを良く見かけます。何それって方はコチラ（Boxify）。
その中でも多くのテンプレートに採用されていたスクロールイベントを制御できるプラグイン「Waypoints」を使用し、実際のホームページ制作でも使えるようにIE8対応を目指してみたいと思います！

まずはデモをご覧ください。

1. デモ

• Demo

特定の位置までスクロールすると、要素が下からフェードインしてきます。

2. ダウンロード

「jQuery」本体はダウンロードするか、Googleにホストされているファイルを読み込みましょう。
「Waypoints」のバージョンは3.1.1です。下記サイトからダウンロードし「lib」フォルダ内の「jquery.waypoints.min.js」を使用します。

• jQuery
• Waypoints

3. HTML&CSS

ある程度の高さがないとスクロールできませんので、その辺を注意しながらマークアップしましょう。
ダウンロードしたプラグインも忘れないように読み込ませてください。下記は「body内」です。

<header id="header">
	<h1>Waypoints</h1>
</header>
<p id="text">jQuery Waypoints Demo</p>
<div id="content">
	<div id="wrapper">
		<section class="section">
			<figure class="thumb"><img src="img/thumb1.jpg"></figure>
			<h2>Title</h2>
			<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
		</section>

		<section class="section">
			<figure class="thumb"><img src="img/thumb2.jpg"></figure>
			<h2>Title</h2>
			<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
		</section>

		<section class="section">
			<figure class="thumb"><img src="img/thumb3.jpg"></figure>
			<h2>Title</h2>
			<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
		</section>
	</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>

今回はハイライトされている箇所をフワッと表示させていきます！
スタイルは適当で構いませんので、見やすいように整えておきましょう。

body { margin: 0;}
#header {
	background-image: url('img/image.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/image.jpg', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/image.jpg', sizingMethod='scale')";
	text-align: center;
	display: block;
	min-width: 960px;
	padding: 360px 0px;
}
h1 {
	border: solid 2px #fff;
	color: #fff;
	font-size: 59px;
	display: inline-block;
	margin: 0;
	padding: 16px 32px;
}
h2 {
	color: #4f4d47;
	font-weight: normal;
	font-size: 23px;
	margin: 0;
	padding: 8px 0;
}
p { color: #4f4d47; font-size: 14px; margin: 0;}
#text { font-size: 23px; text-align: center; min-width: 960px; padding: 64px 0;}
#content { background: #f5f3ec;}
#wrapper { width: 960px; margin: 0 auto; padding: 64px 0;}
#wrapper:after { content: ""; clear: both; display: block;}
.section { box-sizing: border-box; width: 33.33333333%; float: left; padding: 0 8px;}
.thumb { margin: 0;}
.thumb img { display: block; width: 100%; height: auto;}

「Waypoints」とは関係ありませんが、ハイライトの箇所は「background-size:cover」をIE対応させたものです。
「background-size:cover」は背景画像の比率、アスペクト比を保った状態でウィンドウいっぱいに表示させることができるCSS3のプロパティなんですが、IE9からの対応でIE8では使用できません。
今回はIE8対応を目指したいので「filter」でウィンドウ一杯に広げてますが、この方法だとアスペクト比を保てないので、まともな対応をしたい方はプラグインを使用するようにしましょう！

4. Waypoints

スクリプト部分の全体像は下記のような感じです。

$('.section').css({position:'relative', top:'8px', opacity: 0});

var i = 0;
var length = $('.section').length;
var int;

function doThis(){
	if(i >= length){
		clearInterval(int);
	}else{
		$('.section').eq(i).stop().animate({top:'0px', opacity: 1}, 1000);
		i++;
	}
}

$(function(){
	$('#wrapper').waypoint(function(){
		int = setInterval('doThis(i)', 500);
	},{
		offset : '95%'
	});
});

では、小分けにして簡単に説明させてください！

$('.section').css({ position:'relative', top:'8px', opacity: 0 });

「.section」クラスにスタイルを追加しています。
CSSに直接記述しても問題ないですが、スクリプトが読み込まれなかった際に「透明で見えない」ということは避けたいので、念のためスクリプト側に記述しておきます。

var i = 0;
var length = $('.section').length;
var int;

「i」に「0」を、「length」に「.section」要素の数を取得し、代入しています。「.section」というクラスを付与した要素は3つですので、この段階で「length」には「3」が代入されます。

function doThis(){
	if(i >= length){
		clearInterval(int);
	}else{
		$('.section').eq(i).stop().animate({top:'0px', opacity: 1}, 1000);
		i++;
	}
}

「Waypoints」のトリガーポイントで「doThis」という関数を実行したいので、事前に定義しておきます。

「i」のカウントが「length」以上になれば、設定した「Interval(int)」をクリア。そうでない場合は「.section」の「i」番目の要素に「top:’0px’」「opacity:1」に1000ミリ秒かけて変化させ、最後に「i」をインクリメント（1づつ足す）。という条件分岐を記述しています。

$(function(){
	$('#wrapper').waypoint(function(){
		int = setInterval('doThis(i)', 500);
	},{
		offset : '95%'
	});
});

「Waypoints」使用の際は「$(‘セレクタ’).waypoints(処理);」と記述します。
処理の内容は定義しておいた関数「doThis」を500ミリ秒感覚で呼び出します。条件分岐を設定しておいたので「i」が「length」以上になると処理は終了します。

「Waypoints」のトリガーポイントですが、「$(‘セレクタ’)」の要素がブラウザ上部に触れた時がデフォルトとなっています。
今回のように「要素が下部に配置されていてブラウザ上部に届かない」、「タイミングが遅すぎるor早すぎる」場合は「offset」オプションを使います。

「offset」はトリガーポイントの位置を変更できるオプションで、ここでは「95%」を設定しています。これにより「#wrapper」が付与されている要素がブラウザの上部から「95%」の位置にきたときに処理が実行されるようになります。数値はピクセル単位も可能で、マイナスの値も可能ですよ！

デモの内容は以上ですが「Waypoints」には、他にもいくつかオプションがあるので、確認したい方は下記サイトの右上にある「API」からどうぞ！

• Waypoints

5. CSS3を使用したい場合

IE9以下の対応を考えてない方は、スムーズにアニメーションできるCSS3のほうがいいですよね！デモの内容を少し書き換えるだけで出来るので、そちらも記載しておこうかとおもいます。

<section class="section">…</section>
<section class="section delay-05s">…</section>
<section class="section delay-1s">…</section>

「.section」が表示されるタイミングを変えたいので、2個目、3個目の「.section」に、それぞれ「.delay-05s」「.dekay-1s」のクラスを足しておきます。

.fadeInUp {
	-webkit-animation: fadeInUp 1s cubic-bezier(.55,0,.1,1) both;
	animation: fadeInUp 1s cubic-bezier(.55,0,.1,1) both;
}
@-webkit-keyframes fadeInUp { from{ opacity: 0; -webkit-transform: translateY(8px); transform: translateY(8px); }}
@keyframes fadeInUp { from{ opacity: 0; -webkit-transform: translateY(8px); transform: translateY(8px); }}
.delay-05s {
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
}
.delay-1s {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}

デモのスタイルにこれらを追加しておきましょう。
「.delay-05s」「.dekay-1s」には「animation-delay」プロパティを設定し、0.5s毎に表示されるようにしておきます。
CSS3アニメーションは下記の記事にて記載してますので、省かせていただきます。

• jQueryプラグイン「pjax」でスムーズにページ遷移するサイトの作り方

$(function(){
	$('#wrapper').waypoint(function(){
		$('.section').addClass('fadeInUp');
	},{
		offset : '95%'
	});
});

スクリプトはこれだけ。デモでは関数を使用しましたが、CSS3の場合は使いませんので削除してしまいましょう！
ハイライト部分は「.section」に「.fadeInUp」というクラスを追加する処理です。

これでCSS3を使用したアニメーションは以上です！

「Waypoints」いかがでしたか？
簡単に面白い仕掛けを作れるので、色々と試して頂ければ幸いです！

• ツイート
•