パララックスの仕組み〜jQuery

主な仕組み

スクロールイベントを使用してスクロールした量だけオブジェクトを移動させます。

スクリプトで使用する主なメソッド

1. スクロールイベントはscroll( )メソッドを使用します。
2. スクロール量を取得する方法は$(window).scrollTop( )で取得できます。
3. オブジェクトの現在の座標を取得するにはoffset( )を使用します。

オブジェクトの現在の座標は
offset().top でy 軸、offset().left でx 軸の値がとれます。

HTML要素を動かす

動かす対象のオブジェクトをブロック要素でマークアップして、CSS でその要素をposition:fixedとして固定します。

スクロールするとテキストAを動かすサンプル
HTMLコード

<p id="no1">A</p>

CSSコード

#no1{
  position:fixed;
  right:30px;
  top:50px;
}

スクリプト

$(function() {
  var pos = $("#no1").offset();//最初の位置
    $(window).scroll(function() {
    	var y = $(this).scrollTop();//スクロール位置
        $("#no1").css("top", pos.top + y );
    });
});

このスクリプトで上下への動きが実現できます。スクロールした分量だけオブジェクトの座標に
加算されます。

注目すべき動きは加速度がつくことです。これはy の値が一定では無くスクロールするだけ数値が増
えるため加速度が加わることになります。

一般的にスクリプト上（現実の物理の世界もいっしょです）で速度をつけるには、例えばタイマーを仕掛けておいて１秒ごとに10pxの距離を加算することで運動をさせることができます。
例　v += 10px
この場合は１秒ごとに10pxの距離が同じように加算されますので等速運動になります。

加速度をつけるには、加算する数字を増やしていけばよいのです。
例　v += ipx; i++;

今回のサンプルの例ではタイマーの代わりにスクロール位置の数字を利用します。この数字はスクロールすると同時に加算されていきますのでこの運動は一定の早さでスクロールすると加速度がつくことになります。

移動距離の調整はスクロール位置の数字を調整します。
サンプル

$(function() {
  var pos = $("#no1").offset();//最初の位置
    $(window).scroll(function() {
    	var y = $(this).scrollTop();//スクロール位置
        $("#no1").css("top", pos.top + y/5 );
    });
});

横移動も簡単にです。.css()の設定をtopからleftに変更するだけです。
サンプル

$(function() {
	var pos = $("#no1").offset();//最初の位置
    $(window).scroll(function() {
    	var y = $(this).scrollTop();
	$("#no1").css("left", pos.left + y/5 );
    });
});

参考サンプル１
参考サンプル２

背景画像の移動

CSSのbackgroundプロパティを利用して画像を動かします。
具体的にはbackground-positionの値をスクロール値で増減して動かします。

次のサンプルの最初のif文は、スクロール量がdiv#section2のy座標より大きくなったかどうかを判定しています。
もし、大きくなった場合はy 座標をbackground-positionの設定で決めていきます。
「value – fragariaTop」つまりスクロール量からsection2のy座標を差し引いた値とします。
これはスクロール量から自分自身の初期座標を引くため、スクロールした量と同じだけ下に動きます。
具体的には、30px スクロールしたら座標は下へ30px 移動します。つまり30-30＝0 となります。
結果として背景画像は固定状態になります。position:fixed と同じ状態です！
こうすることでスクロールしても背景画像は静止した状態を作ることができます。

else文では、それ以外の条件はbackground-position:center top にして、通常の背景表示にします。

また、(value – section3PosTop)*2 とすると背景は逆向きに動きだします。

参考サンプル

$(function() {
    var fragariaTop = $('#section2').offset().top;
    var tomatoTop = $('#section3').offset().top;
    var ashTop = $('#sectionAshColor').offset().top;
	var chocoTop = $('#section4').offset().top;
 $(window).scroll(function() {
    var value = $(this).scrollTop(); //スクロール値を取得
    $('#scrollValue').text(value);
    if (value > fragariaTop) {
    	$('#section2').css({"background-position": "center " + (value - fragariaTop)+"px"});
    } else {
    	$('#section2').css({"background-position": "center " +"top"});
    }
    if (value > tomatoTop) {
    	$('#section3').css({"background-position": "center " +(value - tomatoTop)*2+"px"});
    } else {
    	$('#section3').css({"background-position": "center " + "top"});
    }
    if (value > chocoTop) {
    	$('#section4').css({"background-position": "center " + chocoTop+"px"});
    } else {
    	$('#section4').css({"background-position": "center " +(value - chocoTop)+"px"});
    }
    });
});