背景画像の簡単なパララックス

背景画像を簡単にパララックス。
jQuery1.7.2で動作確認済み。
bodyに対して隙間なく背景を敷いておいて、下記を実行。

$(function() {
	$(window).scroll(function() {
		var value = $(this).scrollTop();
		var value = value*2 + 'px'
		$('body').css('background-position', '0 '+ value);
	});
});

3行目で現在のスクロールの値をとる。

4行目でずらす値を生成する。たとえば*2の値を変えると、パララックスするスピードも変わる。
ゆっくりにしたい場合は/2とかでもいいかも。

投稿者:

ayako0802

フロントエンドエンジニア