スマホ対応！パララックスサイトの作り方

うさこ

2014.06.24

フロントエンジニア

皆様おひさしゅうございます。
ラーメン女子のうさこでございます。

最近は大好きなラーメンも食べるのを控えています。
えらいことになってるんですよ・・・親に骨皮筋子と言われた私でも・・・！

以前、会社の飲み会でデザイナーのユウコさんに、25 歳を超えるといくら食べても太らなかった体質も変化するから気をつけた方がいいよ！・・・というありがたい言葉をいただきました・・・まさに今、身に染みて体感中でございます（涙

4月9日をもって Windows XP がサポート終了となりましたね！
これで IE6 との長き戦いにも終止符が打てそうですっ！やっとですよ、やっと・・・！
IE6 消え失せろ～♪ ついでに言うと、IE8 も消えちゃっていいんだぜ☆

さて・・・今回で3回目の投稿となりますっ
今回は、スマホに対応したパララックスサイトの作り方についてご紹介！

Sublime Text ネタで通してきたうさこですが、苦しくも今回はあまり関連の無いネタとなっております。

関連簡単にパララックスを実装できるRellax.JSの使い方

パララックスを実現するjQuery「ScrollTween.js」のダウンロード

□ ScrollTween.js
https://github.com/camobile/ScrollTween.js

上記より、ZIPをダウンロードしてきますっ
解凍したデータ内にある下記を使用します！

jquery.mousewheel.js
ScrollTween.js

HTML

head 要素内

これらを読み込ませますっ

[code lang="html"]
&lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/jquery.mousewheel.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/ScrollTween.js&quot;&gt;&lt;/script&gt;
[/code]

[code lang="html"]

[/code]

body 要素内

#container を用意して、アニメーションをさせる要素を包括しますっ

[code lang="html"]
&lt;div id=&quot;container&quot;&gt;
	&lt;div id=&quot;cnt1&quot; class=&quot;cnt&quot;&gt;Top - Center - Right&lt;/div&gt;
	&lt;div id=&quot;cnt2&quot; class=&quot;cnt&quot;&gt;Bottom - Center - Left&lt;/div&gt;
	&lt;div id=&quot;cnt3&quot; class=&quot;cnt&quot;&gt;Opacity 0 - 1 - 0&lt;/div&gt;
&lt;/div&gt;
[/code]

[code lang="html"]

<div id="cnt1" class="cnt">Top - Center - Right</div>

<div id="cnt2" class="cnt">Bottom - Center - Left</div>

<div id="cnt3" class="cnt">Opacity 0 - 1 - 0</div>

</div>

[/code]

CSS

[code lang="css"]
@charset &quot;utf-8&quot;;

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

#container {
	width: 100%;
	height: 100%;
	display: block;
}

.cnt {
	padding: 20px;
	border: 2px dotted #009;
	font-size: 24px;
	color: #333;
	background-color: gray;
}
[/code]

[code lang="css"]

@charset "utf-8";

html, body {

margin: 0;

padding: 0;

height: 100%;

}

#container {

width: 100%;

height: 100%;

display: block;

}

.cnt {

padding: 20px;

border: 2px dotted #009;

font-size: 24px;

color: #333;

background-color: gray;

}

[/code]

jQuery

[code lang="javascript"]
jQuery.event.add(window,&quot;load&quot;,function(){

	//リサイズイベント
	$(window).resize(function(){
		//コンテンツの高さ設定
		hoge.contentHeight();
	});
    
	// 以下、パララックス機能の記述
	hoge.parallax();

});

var hoge = [];

// ウィンドウサイズによってコンテンツの高さを変える
hoge.contentHeight = function(){
	var winHeight = $(window).height();
}

// パララックス機能
hoge.parallax = function(){

	// アニメーション要素を包括している要素を指定
	var containerDiv = $('#container');
	// アニメーションの変数を宣言
	var container = ScrollTween.container(containerDiv);

		// 変数に .add でアニメーションを追加していく
		container.add(&quot;#cnt1&quot;, function(tween) {
			tween
						// スクロール値「100」時点で、上にはけた状態で中央（水平）方向に存在している
						.to(100, tween.styles().topOut().center())
						// スクロール値「200」から「300」間で、中央（垂直）方向に 200 px の位置でストップする
						// スクロール値「200」から「300」間の処理（変化）ではないことに注意！！
						.range(200, 300, tween.styles().middle(200))
						// スクロール値「400」時点で、右方向にはける
						.to(400, tween.styles().rightOut());
		});
		container.add(&quot;#cnt2&quot;, function(tween) {
			tween
						// スクロール値「200」時点で、下にはけた状態で中央（水平）方向に存在している
						.to(200, tween.styles().bottomOut().center())
						// スクロール値「300」から「400」間で、中央（垂直）の位置でストップする
						.range(300, 400, tween.styles().middle())
						// スクロール値「500」時点で、左方向にはける
						.to(500, tween.styles().leftOut());
		});
		container.add(&quot;#cnt3&quot;, function(tween) {
			tween
						.to(400, tween.styles().center().middle())
						// {progress:～}で直接 css をあやつれる
						.to(400, 0 , { progress: function (tween) { $(&quot;#cnt3&quot;).css(&quot;opacity&quot;, 0) } })
						// opacity 部分は、0 から tween 分がプラスされるイメージ
						.to(600, 0 , { progress: function (tween) { $(&quot;#cnt3&quot;).css(&quot;opacity&quot;, tween) } })
						.to(800, 0 , { progress: function (tween) { $(&quot;#cnt3&quot;).css(&quot;opacity&quot;, 1) } })
						// opacity 部分は、1 から tween 分がマイナスされるイメージ
						.to(1000, 0 , { progress: function (tween) { $(&quot;#cnt3&quot;).css(&quot;opacity&quot;, 1 - tween) } });
		});

		// アンカーリンクをつける
		$('#nav .list:nth-child(2) a').stop().on('click', function(){
			// 引数にはスクロール値が入ります
			container.scrollTo(1000);
			return false;
		});

		// ちょっと処理ずらして、アニメーションを再生する
		setTimeout(function(){
			container.play();
		},300);
}
[/code]

[code lang="javascript"]

jQuery.event.add(window,"load",function(){

//リサイズイベント

$(window).resize(function(){

//コンテンツの高さ設定

hoge.contentHeight();

});

// 以下、パララックス機能の記述

hoge.parallax();

});

var hoge = [];

// ウィンドウサイズによってコンテンツの高さを変える

hoge.contentHeight = function(){

var winHeight = $(window).height();

}

// パララックス機能

hoge.parallax = function(){

// アニメーション要素を包括している要素を指定

var containerDiv = $('#container');

// アニメーションの変数を宣言

var container = ScrollTween.container(containerDiv);

// 変数に .add でアニメーションを追加していく

container.add("#cnt1", function(tween) {

tween

// スクロール値「100」時点で、上にはけた状態で中央（水平）方向に存在している

.to(100, tween.styles().topOut().center())

// スクロール値「200」から「300」間で、中央（垂直）方向に 200 px の位置でストップする

// スクロール値「200」から「300」間の処理（変化）ではないことに注意！！

.range(200, 300, tween.styles().middle(200))

// スクロール値「400」時点で、右方向にはける

.to(400, tween.styles().rightOut());

});

container.add("#cnt2", function(tween) {

tween

// スクロール値「200」時点で、下にはけた状態で中央（水平）方向に存在している

.to(200, tween.styles().bottomOut().center())

// スクロール値「300」から「400」間で、中央（垂直）の位置でストップする

.range(300, 400, tween.styles().middle())

// スクロール値「500」時点で、左方向にはける

.to(500, tween.styles().leftOut());

});

container.add("#cnt3", function(tween) {

tween

.to(400, tween.styles().center().middle())

// {progress:～}で直接 css をあやつれる

.to(400, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 0) } })

// opacity 部分は、0 から tween 分がプラスされるイメージ

.to(600, 0 , { progress: function (tween) { $("#cnt3").css("opacity", tween) } })

.to(800, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 1) } })

// opacity 部分は、1 から tween 分がマイナスされるイメージ

.to(1000, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 1 - tween) } });

});

// アンカーリンクをつける

$('#nav .list:nth-child(2) a').stop().on('click', function(){

// 引数にはスクロール値が入ります

container.scrollTo(1000);

return false;

});

// ちょっと処理ずらして、アニメーションを再生する

setTimeout(function(){

container.play();

},300);

}

[/code]

Option

動きに関する関数は、下記がライブラリ側で用意されていますっ

～方向に num px 移動する

引数で移動させる px 数を指定できます！

middle(num)

中央（垂直）方向に num(単位:px) 移動する
※topOut()、bottomOut()のみ併用可能

center(num)

中央（水平）方向に num(単位:px) 移動する
※leftOut()、rightOut()のみ併用可能

top(num)

上方向に num(単位:px) 移動する

bottom(num)

下方向に num(単位:px) 移動する

left(num)

左方向に num(単位:px) 移動する

right(num)

右方向に num(単位:px) 移動する

～方向にはける

topOut()

上方向にはける

bottomOut()

下方向にはける

leftOut()

左方向にはける

rightOut()

右方向にはける

アンカーリンクをつける

ライブラリ側で .scrollTo() というメソッドが用意されているようなので、惜しみ無く利用してあげます。こちら、ライブラリの配布先にも載ってない情報です！

[code lang="javascript"]
$('#nav .list:nth-child(1) a').on('click', function(){
	container.scrollTo(1000);
	return false;
});
[/code]

[code lang="javascript"]

$('#nav .list:nth-child(1) a').on('click', function(){

container.scrollTo(1000);

return false;

});

[/code]

注意すべき点

イージングについて

speed 部分は、実際スクロールで動いた位置からどれだけふんわりずらすかというやつでパララックスみたいにどのくらいスクロールさせたら・・・的な作りだと、そこの値を調整した瞬間に想定していた動きが全て乱れるということになるので要注意です！
easing 部分は、スピード感のある動きに関わっています。後のほうで直そうとすると、アニメーション全ての秒数に関わってきて死亡確定なので・・・初めの段階で「気持ちのいい動き」となるイージングの動きを確認して OK をもらうようにしましょう！
スクロール後に少し余韻が残る感じにしたい場合は、上記2点の値を大きめにしてスクロールしたらより余分に動かすようにすると実現できます。