ページスクロール時にコンテンツを左右交互にスライドイン

jQueryを使用したページスクロールアクション（パララックス）の一つ。
対象コンテンツの直前で、コンテンツ（ボタン）を左右交互にスライドインで表示させる方法のメモ。

HTML

<section class="sample">
<ul class="sample__slide__list">
<li class="sample__slide__list__item"><a href="">リンクボタン01</a></li>
<li class="sample__slide__list__item"><a href="">リンクボタン02</a></li>
<li class="sample__slide__list__item"><a href="">リンクボタン03</a></li>
<li class="sample__slide__list__item"><a href="">リンクボタン04</a></li>
</ul>
</section>

CSS

.sample {
	overflow: hidden;
}
.sample__slide__list__item {
	width: 100%;
	background: rgba(0, 0, 0, 1);
	position: relative;
	z-index: 0;
	overflow: hidden;
	opacity: 0;		
}
.sample__slide__list__item:nth-of-type(2n+1) {
	margin-left: 100vw;
}
.sample__slide__list__item:nth-of-type(2n) {
	margin-left: -100vw;
}
.sample__slide__list__item:nth-of-type(n+2) {
	margin-top: 1px;
}
.sample__slide__list__item::before {
	content: "";
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute;
	z-index: -1;
	opacity: 0.77;
}
.sample__slide__list__item:nth-of-type(1)::before {
	background: #f00;
}
.sample__slide__list__item:nth-of-type(2)::before {
	background: #f00;
}
.sample__slide__list__item:nth-of-type(3)::before {
	background: #f00;
}
.sample__slide__list__item:nth-of-type(4)::before {
	background: #f00;
}
.sample__slide__list__item a {
	display: block;
	width: auto;
	padding: 40px 0;
	font-weight: bold;
	text-align: center;
	color: #fff;
}

表示範囲の大枠を「overflow: hidden;」に設定することで、スマホでもレイアウトを崩すことなく表示できる。

Javascript

$(window).scroll(function(){
	var sH = window.innerHeight * 2 / 3;
	var offsetTop = $(window).scrollTop();
	if(offsetTop > $('.sample').offset().top - sH){
		$('.sample__slide__list__item').each(function(i){
			//250ミリ秒×並び順（i番目）の待機後アニメーションを実行
			$(this).stop().delay(i * 250).animate({'opacity':'1.0', 'margin-left':'0'}, 250 ,'swing');
		});
	}
})

sHの値でファンクションのトリガー（発動位置）を設定。
参考例は対象コンテンツの上位置から使用ブラウザの画面高さの2/3を引いた位置で設定。
each関数で「sample__slide__list__item」の個数分、括弧内の処理を実行。
delay関数はアニメーション実行までの待機時間。

サンプル

• リンクボタン01
• リンクボタン02
• リンクボタン03
• リンクボタン04