指定範囲でのパララックスを実装する

指定範囲内でパララックスさせることがたまにあるので、実装方法をメモしておきます。

サンプルコード

スクロールの範囲と移動する範囲を指定して、パララックス要素の現在の値を返す関数を作ってみます。
.sample01、.sample02、.sample03をそれぞれ動かします。

HTML

<div class="sample sample01"></div>
<div class="sample sample02"></div>
<div class="sample sample03"></div>

CSSは必要な部分のみ抜粋しています。

CSS

.sample {
	position: absolute;
}
.sample01 {
	top: 1000px;
	left: 0;
}
.sample02 {
	top: 2000px;
	right: 300px;
}
.sample03 {
	top: 3000px;
	left: -20px;
}

JavaScript

$(window).on('load scroll', function() {
	$('.sample01').css({
		left: parallaxFunc(0, 400, 1000, 1500)
	});
	$('.sample02').css({
		right: parallaxFunc(300, -20, 2000, 2500)
	});
	$('.sample03').css({
		top: parallaxFunc(3000, 3700, 3100, 3900),
		left: parallaxFunc(-20, 500, 3100, 3900)
	});
});

/**
 * パララックス要素の現在の値を返す
 * @param num moveStart   (required) パララックスで動かす要素の開始地点での値
 * @param num moveEnd     (required) パララックスで動かす要素の終了地点での値
 * @param num scrollStart (required) パララックスで動かすスクロール範囲の開始地点
 * @param num scrollEnd   (required) パララックスで動かすスクロール範囲の終了地点
 * @return num
 */
function parallaxFunc(moveStart, moveEnd, scrollStart, scrollEnd) {
	var winScroll = $(window).scrollTop();
	var winHeight = $(window).height();
	// スクロール判定の基準位置
	var scrollPos = winScroll + winHeight;

	// 現在の値の取得
	var currentVal;
	// スクロール範囲に到達していない場合
	if(scrollPos < scrollStart) {
		currentVal = moveStart;

	// スクロール範囲を過ぎている場合
	} else if(scrollPos > scrollEnd) {
		currentVal = moveEnd;

	// スクロール範囲内の場合
	} else {
		// スクロール範囲
		var scrollRange = scrollEnd - scrollStart;
		// 移動範囲
		var moveRange = Math.abs(moveEnd - moveStart);
		// 進行方向
		var direction = moveStart < moveEnd ? 1 : -1;
		// 進捗率1%あたり進む距離
		var moveRate = moveRange / 100 * direction;
		// 現在の進捗率
		var progressRate = (scrollPos - scrollStart) / scrollRange * 100;

		currentVal = moveStart + progressRate * moveRate;
	}
	return currentVal;
}

parallaxFunc()の関数で現在のスクロール位置で各要素のCSSの値を返すようにしています。
パララックスのデモページ