テクノロジー

2015.3.19 THU

第15回　マウスホイールに応じて1画面毎にページを遷移するパララックスを作成する

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

解説：（有）ムーニーワークス　ハヤシユタカ

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

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

■今回作成したサンプル

【サンプル】：「マウスホイールに応じて1画面毎にページを遷移するページ」

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

ブラウザのスクロールに応じて、各要素が任意のタイミングで動作する仕組みを実装します。各要素の表示されるタイミングや移動する速度を微妙に調整することで、視差によるパララックス効果となります。

■■■■　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要素の最後に記述します。

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

■■■■　HTMLコード

<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>

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

■■■■　HTMLコード

<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」として設定しました。

■■■■　CSSコード

.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プロパティを変化させて画面内に表示させる。

■■■■　CSSコード

#slide1 {
 top: 0;
}

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

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

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

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

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

■■■■　JSコード

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画面ずつ区切って遷移するアニメーションを設定していきます。

■■■■　HTMLコード

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

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

■■■■　JSコード

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;
		};

マウスホイールでページ毎にアニメーションしていく

●ナビゲーションやページ遷移するためのリンクボタンを設置する

最後に、マウスホイールが利用できない環境のため、各画像へダイレクトにリンクするボタンや上下に1画面分遷移するナビゲーションなどを設置します。

ナビゲーションや上下移動リンクなどでユーザビリティーの向上

■■■■　ヘッダナビゲーションのコード

<ul id="pageNavi" class="nav">
　<li><a data-prog="2" href="#slide2">The Railway Museum</a></li>
　<li><a data-prog="4" href="#slide4">Concept</a></li>
　<li><a data-prog="6" href="#slide6">Guidance</a></li>
</ul>

ヘッダーナビゲーションで各画像へリンクするa要素にはhref属性のほか、独自data属性「data-prog」を設定し、Javascriptで画像へダイレクトに遷移するように制御します。

■■■■　スライド移動リンクボタンのコード

<div id="pagerNavi">
　<a class="button"><i class="icon-chevron-up icon-white"></i></a>
　<a class="button"><i class="icon-chevron-down icon-white"></i></a>
</div>

●各ナビゲーションにクリックイベントと関連関数を設定する

ヘッダーナビゲーションのリンクやページ下部に設置したページャーナビゲーションをクリックしたときに、各自ページ遷移の処理を行うようにクリックイベントを設定していきます。今回のサンプルは、古いInternet Explorerなど正常に動作しない環境である場合には、代替処理としてパララックス効果の伴わないスライド遷移処理を行うようにしています。

■■■■　JSコード

$('h1#site_id a, #pageNavi a, #pagerNavi a').on('click',function(e){
	e.preventDefault();
	changeMode();
	});
$('h1#site_id a').on('click',function(){
	var diff = param.prog * 0.75;
	param.prog = 0;
	jumpSlide(0, diff);
});
$('#pageNavi a').on('click',function(){
	var dest = $(this).attr('data-prog');
	var diff = Math.abs(param.prog - dest) + 1;
	param.prog = --dest;
	jumpSlide(dest, diff);
	});
$('#pagerNavi a').on('click',function(){
	var dir = $(this).index() == 0 ? -1: 1;
	var dest = parseInt(param.prog) + dir;
	if( dest >= 0 && dest <= param.slideCount) {
		jumpSlide(dest, 1);
		param.prog = dest;
		};
	});
// handlers
・・・省略・・・
var jumpSlide = function(dest, diff) {
	if( !_ua.ltIE8 ) {
		jarallax.jumpToProgress( dest * 10, param.transDur() * diff, 60);
		} else {
		dest *= 940;
$('html').stop(true).animate({ scrollTop: destH },1000);
		}
	};
};

これで以上になります。

今回は縦のスクロールでしたが、次回はマウスホイールに対応した横スクロールのページを作成します。

『現場でかならず使われている jQueryデザインのメソッド』

今回紹介したサンプルは『現場でかならず使われている jQueryデザインのメソッド』にてサンプルダウンロードとコードの解説を行っております。

作成したサンプルや本の紹介はこちらをご覧ください。

2015/3/18

●本連載で使用している書籍「現場でかならず使われている jQueryデザインのメソッド」

jQueryの特長は、通常のJavaScriptよりもシンプルなコードでWebサイトの動的なふるまいを記述できる点です。CSSと同じセレクタが利用できるので、HTML+CSSをひと通り理解していれば、文法や記述ルールはすぐに習得できます。書は、このようなjQueryの実践感覚を身につくように、アコーディオンやタブパネル、ツールチップといった頻出の基礎技術から、背景全面動画、パララックススクロールなどの現在流行している最新の手法まで、多彩なjQueryのテクニックを解説。現場の制作メソッドがぎっしり詰まった必携の一冊です！

Profile
【ハヤシユタカ】2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より教鞭をとる。2004年からは、デジタルハリウッド大学大学院、明治大学大学院非常勤講師を歴任。2012年からはデジハリオンラインスクールにてWEB関連講座のeラーニング教材の開発に携わり、会社・自宅のPCからいつでも「HTML5」「WordPress」を学べる講座を担当。2013年御苗場Vol12.横浜にて「The Zoological Garden ～言葉のない対話～」エプソン賞受賞。

こちらの連載もあわせてご覧ください
●WordPressでブログでなくビジネスサイトをつくろう：http://www.mdn.co.jp/di/articles/2782/
●ゼロからはじめるHTML5でのサイト制作：http://www.mdn.co.jp/di/articles/2605/
●HTML5でサイトをつくろう：http://www.html5-memo.com/
●Webデザインクリップ：http://webdesignmatome.com/

【著書・共著】
●現場でかならず使われている jQueryデザインのメソッド (2014/4/25)
●HTML5デザイン仕事のネタ帳 CSS3+JavaScript+CSSフレームワークと活用するプロのテクニック (2014/3/24)
●現場で役立つCSS3デザインパーツライブラリ (2013/5/17)
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしいスタイルシートデザインの基本原則(2012/5/25)