SONICMOOV Googleページ

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

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

  • このエントリーをはてなブックマークに追加

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

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

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

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

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

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

目次

  1. パララックスを実現するjQuery「ScrollTween.js」のダウンロード
  2. HTML
  3. CSS
  4. jQuery
  5. Option
  6. 注意すべき点
  7. さいごに・・・。
  8. 参考サイト

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

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

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

  • jquery.mousewheel.js
  • ScrollTween.js

HTML

head 要素内

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/ScrollTween.js"></script>

body 要素内

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

<div id="container">
	<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>

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

jQuery

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

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() というメソッドが用意されているようなので、惜しみ無く利用してあげます。こちら、ライブラリの配布先にも載ってない情報です!

$('#nav .list:nth-child(1) a').on('click', function(){
	container.scrollTo(1000);
	return false;
});

注意すべき点

イージングについて

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

~方向にはける系の使いどころ

1つのアニメーション要素に対して、追従するような要素があるなど・・・ 完全に独立した動きじゃない場合は、Out 系の関数を使わないようにした方が無難です!要素同士のスクロール値の計算が大変面倒なことになりますっ

制作の流れ

想定している動きと異なった場合に修正量が半端ないので、2セクションずつ等ちょっとずつ確認するようにして想定する動きに合わせていきましょう。

さいごに・・・。

いかがだったでしょうか? パララックス案件の依頼が増えてきてしばらく経ちますが、スマホにも対応!ってことになると PC で使っていたライブラリがスマホでは使えなかったりします!

ScrollTween.js を使ったパララックスサイトの作り方が、本家の ScrollTween.js で紹介されておらず、上手くまとまっているサイトも少なかったので・・・なるだけ分かりやすいように補足も加える形でまとめてみました!

パララックスサイトのアイデアをこちらにまとめました。ぜひともチェックしてみてください。
アイデアを真似したくなるパララックスサイト20選

みなさまのお役に立てれば幸いです!
それでは・・・よきコーディングライフを!!

参考サイト

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

うさこ(マークアップエンジニア)

ソリューション事業部マークアップエンジニアのうさこです。入社して4年目となりました!ラーメンが大好きなのですが、脂肪という名の悪魔を極力避けるために我慢の日々を過ごしています… ぐぐぐ…

関連するSONICMOOVのサービス

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation