パララックスっぽく背景画像をの設置する方法

普通に背景画像を設置するともちろんスクロールに合わせて背景画像も動きます。

固定したい場合はbackground-attachment:fixedで固定すれば良いのですが、その中間というかスクロールに合わせて他の要素よりはゆっくりめに少しずつ動かして遠近感というかパララックスっぽい視覚効果を得たい場合の背景画像の設置方法。

まずは背景画像を設置background-attachment:fixedで配置します。
次にbackground-position-y(縦スクロールの場合)の値を%で指定します。(50%で真ん中)
あとは必要に応じてbackground-sizeやrepeatの設定を行ったらCSSの準備は完了。

pxでなく%で設定する理由は汎用性が高くレスポンシブに対応できるため。
画像や要素のサイズが決まっていればpxで指定したほうがサクサク動くかもしれません。

次にjQueryで行う事は3つ

1．Body(背景画像を設置する要素)の高さの取得
2．スクロール位置(TOP)の取得
3．以上の値からbackground-position-yの値の取得

簡単ですね。
CSS

body{
	background-image: url(image.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position-x: 50%;
	background-position-y: 10%;
	background-attachment:fixed;
	
}

JS

$(function(){
//スクロールしたい要素の高さの取得（普通は）
var getHeight = $('body').height();
	$(window).scroll(function () {//スクロールする度に行う処理。　　　　　　　　　　
		var ScrollTop = $(document).scrollTop(); //上部を基準にしたスクロール場所の取得
		var bgPosition = 80/getHeight*ScrollTop+10;　// 80←%を動かす値(10%→90%等), 10←初期値
　　　　　　　　　　　　　　　　　　　　
		$('body').css(//background-position-yのコントロール
			{backgroundPositionY: bgPosition+"%"}
			);
	 });
});

サンプルはこちら。

80/getHeight*ScrollTop+10;の部分は何をやってるのかというと中学数学レベルで難しい事は無く、動かす値(80)を最大値(getHeight)で割って1pxスクロール当たり何%動くかを計算、それにスクロール値(ScrollTop)を掛けたものに初期値(10)を足しています。

厳密にはgetHeightでは最大値+ウィンドウの高さですがこの大きさの場合誤差レベルというか入力する値で動き方を調節すれば良いだけなので無視します。
気になる人やもっと小さい要素で行う場合はwindow.innerHeightでウィンドウの高さも取得してください。
ウィンドウサイズ変更に伴う挙動も気になる人はwindow.onresizeのイベントハンドラで関数を作ってgetHeightを実行してください。

$(function(){
function resize(){
getHeight = $('body').height();//変数を関数外でも使うのでvarは付けません。
windowHeight = window.innerHeight;
scrollHeight = getHeight-windowHeight;//最大スクロール値の計算
}
resize();//読み込み時の処理
window.onresize=resize;//リサイズのイベントハンドラ
	$(window).scroll(function () {
ScrollTop = $(document).scrollTop();
bgPosition = 80/scrollHeight*ScrollTop+10;
		$('body').css(
			{backgroundPositionY: bgPosition+"%"}
			);
	 });

});

ちょっと長くなりますがこんな感じだと思います。（ちなみに上のサンプルは此方で実装してます）

画像とウィンドウの比率によっては画像が切れたりあまり動いてないように見える事があるのでそこら辺は調節してください。

最初から割と縦長の画像を使ったりリサイズ時に画像を切り替えてもいいかもしれません。

今回は下に動かしましたが、上下左右どこでも好きな方向に移動できます。(左右の場合はbackground-position-xを操作して最大値もHeightではなくWidthを取得します。)

body以外の複数にも設定することでよりパララックスな感じを出すこともできると思います。

※とりあえずやりたかった事を自分なりに実装しただけであまりちゃんと調べてないので、もっと簡単に実装できる方法もあるかもしれません。

モバイルでも使えますが端末とブラウザによってはカクカクします。

スマホでパララックスはまだ厳しいかなぁ。