マウスホイールで1画面毎にページを遷移するパララックス風レイアウトを作成する【jQuery連載15】

複数の背景画像やパーツを異なる速度や方向で動かすことで生じる、視差を活かした奥行き感を演出するパララックス効果ですが、今回はマウスホイールに応じて1画面毎にページを遷移するパララックスを作成しナビゲーションと連動したカスタムを追加して1ページサイトのような形で作成してみます。

今回は各要素の挙動を直感的に設定できるjQueryプラグイン「Jarallux」をパララックスの実装に、マウスホイールによる制御を「jQuery Mouse Wheel Plugin」プラグインを使用して、マウスホイールに応じた1画面ごとのパララックス遷移を実装していきます。

まずはスクロールに応じた要素のパララックス遷移を実装し、マウスホイールの操作で1画面（スライド）分遷移する機能を実装し、ナビゲーションを設置して前後の画面へ遷移したり、任意の画面へ一気に移動するジャンプリンク機能を追加していきます。

今回作成したサンプル

【サンプル】マウスホイールに応じて1画面毎にページを遷移するページ
http://www.html5-memo.com/sample/jq-books/13/

JavaScriptファイルの読み込みとパララックスさせるパーツのHTML

ブラウザのスクロールに応じて、各要素が任意のタイミングで動作する仕組みを実装します。

各要素の表示されるタイミングや移動する速度を微妙に調整することで、視差によるパララックス効果となります。

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>window.jQuery || document.write('<script src="lib/jquery.js"><\/script>')</script>
<script src="lib/jarallax-0.2.3b.min.js"></script>
<script src="main.js"></script>

jQuery 本体、jQuery の後方互換用プラグイン（jQuery Migrate）、そしてJarallax プラグインを読み込む。表示処理の高速化のため、各ファイルはbody要素の最後に記述します。

画面全体を画像を配置した際のコード

<section class="parallax" id="slide1">
<h2 class="photoContainer whole"><img class="photo" src="images/01.jpg" alt="Photo by (c)Yutaka Hayashi" title="Photo by (c)Yutaka Hayashi"></h2>
</section>

画像とテキストでレイアウトした際のコード

<section class="parallax" id="slide2">
<div class="slideContent">
<div class="descriptionContainer">
<header>
<h2>鉄道博物館</h2>
<p class="meta">The Railway Museum</p>
</header>
・・・省略・・・
</div>
</section>

パララックスさせる各画面要素をsection要素で囲み、そのsection要素に一意のidセレクタとパララックス用のclassセレクタを設定する。後にJavascriptによってパララックスの設定をできるようするためで、今回はidセレクタを「slide+(1からの連番)」、classセレクタを「parallax」として設定しました。

.parallax {
 display: block;
 position: fixed;
 top: 120%;
 left: 0%;
 z-index: 100;
 width: 100%;
 height: 100%;
 opacity: 1;
 text-align: center;
 background: rgb( 0, 0, 0);
}

このセレクタでは、positionプロパティをfixedにして固定表示にし、topプロパティを120%にして最初は表示領域外に配置する。画面のスクロールに応じて、topプロパティを変化させて画面内に表示させる。

#slide1 {
 top: 0;
}

スライド#slide1は最初に表示させたいので、topプロパティの値を0%にすることで、表示領域内に表示するように設定します。

Jarallaxプラグインの初期化とアニメーションの設定

まずはJarallaxプラグイン用のオブジェクトを生成してアニメーションを設定していく。パララックスさせたい要素に対して、Jarallaxプラグインが持つaddAnimation関数の引数に各種パラメータを渡す事でアニメーションが実行されます。

この時、パラメータの一つ「progress」は、ページ内のスクロール位置がどのくらいでアニメーションを実行するかタイミングを調整するもので、値が大きければその要素はスクロール位置が下の方で実行されるため、他の要素よりも遅れてアニメーションが実行されます。

このように各要素に、タイミングやスピードの異なるアニメーションを実行させることで、視差効果（パララックス）効果を生む事ができます。

var jarallax = new Jarallax();
		var animation = jarallax.addAnimation('#slide2',[{progress:'0', display:'block', opacity:'1', top:'120%'},
			{progress:'10', top:'0%'},
			{progress:'30', top:'-100%'},
			]);

		jarallax.addAnimation('#slide1',[
		{progress:'0', display:'block', opacity:'1', top:'0%'},
		{progress:'40', opacity:'0'}]);

		jarallax.cloneAnimation('#slide3',{progress:'+10'}, animation);
		jarallax.cloneAnimation('#slide4',{progress:'+20'}, animation);
		jarallax.cloneAnimation('#slide5',{progress:'+30'}, animation);
		jarallax.cloneAnimation('#slide6',{progress:'+40'}, animation);
		jarallax.cloneAnimation('#slide7',[{progress:'+50'}, {progress:'+50'} , {progress:'+60',top:'0%'}], animation);

マウスホイールの操作で1画面ずつ遷移させる

各画像にアニメーションを設定する事でパララックス効果の設定することが分かった。次に各画像を1画面で印象的に見せたり、解説画面も1画面内でしっかりと見せるといった構成のページを作成したい場合もあるだろう。そんな場合は、Jallauxプラグインの設定を応用して、1画面ずつ区切って遷移するアニメーションを設定していきます。

<script src="lib/jquery.mousewheel.js"></script>

1画面ずつ画像を遷移させるアニメーションは前述の設定方法を参考に設定する事ができるだろう。次に、マウスホイールの操作に応じて画像を遷移させる処理を記述していきます。

var param = {
	prog : 0,
	slideCount : $('.parallax').size() - 1, 
	stepMode : 0,
	suspendTime : 1000,
	transDur : function(){
			if(navigator.userAgent.indexOf('Mac') != -1){
				return 600;
			} else {
				return 800;
			}
		}, 
	calcHeight : function(){
		$('html, body').height( $(window).height() * (param.slideCount));
	}
};

・・・省略・・・

$('html').on('mousewheel',function( e, del, delX, delY) {
	e.preventDefault();
	if(param.stepMode == 1) { return; }
	var dest = param.prog - ((del>0)?1:-1);
	if(dest < 0 || dest > param.slideCount){
		return;
	} else {
		param.stepMode = 1;
		param.prog = dest;
		jarallax.jumpToProgress( dest * 10, param.transDur(), 60);
		setTimeout(changeMode, param.suspendTime);
	}
});


・・・省略・・・

		var changeMode = function(){
			param.stepMode = 0;
		};