parallax.jsをいじってパララックスのデモ作ってみた。

ちょっと前に視差効果のあるパララックスサイトまとめなどがよくホットエントリーに上がってきて、「自分もこんなの作ってみたいなー」と思っていたのでトライしてみました。

チュートリアルは下記サイトを参考にしています。
話題になったNikebetterworldに良く似たサイトを作って解説をしてくれています。

そして出来あがったのはこちらのデモサイトです。
以下、メモがわりの解説です。

まず、チュートリアルのサイトからサンプルファイルをダウンロードしてHTMLをみると次のようなjsファイルが読み込まれているのがわかります。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script type="text/javascript" src="scripts/nbw-parallax.js"></script>
<script type="text/javascript" src="scripts/jquery.localscroll-1.2.7-min.js"></script><script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="scripts/jquery.inview.js"></script><script type="text/javascript">// <![CDATA[
$(document).ready(function(){     $('#nav').localScroll(); })
// ]]></script>

parallax.jsはスクロールバーの位置に応じて各divごとの背景画像を制御していて、inview.jsはユーザーウインドウが表示している範囲を判定しているみたいです。

localscrollとscrollToってファイルは右のほうに表示されるナビゲーションをうまく動かすのに必要っぽいです。

細かいことは僕もよくわかっていないのですが、主に触るのはparallax.jsになります。
内容を見て行きましょう。

	var $window = $(window);
	var $firstBG = $('#intro');
	var $secondBG = $('#second');
	var $thirdBG = $('#third');
	var $fourthBG = $('#fourth');
	var trainers = $("#second .bg");

20行目辺りに上のような変数が宣言されています。
これはHTMLの各divと対応しています。動かしたい要素を増やすときはHTMLのdivと一緒にこちらで宣言する変数も増やします。

そして色んな関数をごにょごにょして各要素のスクロールスピードを調整してパララックス効果を生み出します。

	/*arguments:
		x = horizontal position of background (背景の横位置を決める)
		windowHeight = height of the viewport (ユーザーのデバイスの高さ)
		pos = position of the scrollbar (スクロールバーのポジション)
		adjuster = adjust the position of the background (背景の位置を決定)
		inertia = how fast the background moves in relation to scrolling (背景を動かすスピード)
	*/

キモとなっているのは50行目あたりのコメントにあるadjusterやinertiaなのですが、これらが下記記載の関数の引数になっており、うまく設定するとパララックス効果が得られます。

		//if the second section is in view...
		if($secondBG.hasClass("inview")){
			//call the newPos function and change the background position
			$secondBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
			//call the newPos function and change the secnond background position
			trainers.css({'backgroundPosition': newPos(50, windowHeight, pos, 1900, 0.6)});
		}

parallax.jsのなかで各セクションごとに上記のような処理が行われていると思いますが、ここでは一番パララックス効果の分かりやすい、2番目のセクションの処理を例に出しています。

newPosという関数の引数の、inertia(ここでは0.3とか0.6と書かれている数値)を変更すると背景の動くスピードが変化します。

1が通常のスクロールスピードと同じで、このサイトではセクション背景を0.3、スニーカーの画像部分に0.6を設定することでスクロールスピードを変えて視差効果を生み出しています。

今回作ったデモサイトでは2番目のセクションにdivをもうひとつ増やしてみました。
HTMLのdivを増やした場合はそれに対応した変数宣言や処理をparallax.jsに追加すればパララックス効果が得られます。要素ごとの重なりを表現する場合はcssのz-indexで調整します。

あと、上記ソースの1250とか1900という数値は背景画像のスタート位置を決定するものらしいのですが、うまく設定しないと画像が見切れたりします。

色々試してちょうどいいポジションを見つけてみてください。