野良メモ -noramemo-noramemo

京都市山科区のフリーランスwebデザイナーのブログです。

[:N]こいつ…動くぞ！パララックス効果を試した時の覚え書きなど

この記事は2013年6月20日に書かれたもので、内容が古い可能性がありますのでご注意ください。

こいつ…動くぞ！パララックス効果を試した時の覚え書きなど

今流行のフラットデザインの前に有名になったパララックスサイトというサイトの作りがあります。会社でもプライベートでも使うことがなかったのですが、なにも知らないのはどうかと思い、一度パララックス体験をしてみようと思います！

こんにちは！@noramasaです。
Web技術のトレンドを追いきれていない私ですが、興味がないわけではございません。
世間ではもっぱらフラットデザインが話題をよんでいますが、少し流行をさかのぼってパララックスというものを体験してみましたので部分的に覚え書きしておきます:)

パララックスサイトとは

パララックス（parallax）とは「視差」という意味で、個々の内容（コンテンツ）がスクロールやドラッグアンドドロップで別々の動きをするような作りのことをいいます。そのインパクトのある動きなどから、商品の宣伝ページなどに使われることが多いようです。特に遠近感を表現できるので今まで以上に表現の幅が広がりましたね。
ただ、ブラウザ対応やメッセージの伝え方が難しいので、単に「動きがあってかっこいいから」という理由での使用は避けたほうがいいかもしれません。

jQueryプラグイン：jarallax.js

今回は使用しませんが、jQueryのプラグインを利用することで簡単にパララックスを実装することができます。
なかなかわかりやすくて使いやすいそうですので、『わざわざ一から作るのはちょっと…』という方はプラグインの利用をオススメいたします。また機会があれば実装メモとしてもご紹介しようと思います:)
公式サイト：http://www.jarallax.com/

  • Jarallax
    jQueryプラグイン：jarallax.js

実際に作ってみました！

今回挑戦してみたのはスクロールでガリガリ動き回るようなサイトではありませんのでご了承ください。ちなみに、動画でプログラムなどの勉強ができるドットインストールさんの内容を見本に作成しています。
デモの内容はいたって簡単、noramasaの画像と猫の画像が並んでいて、マウスの位置を取得して立体っぽく見えるようにしました。立体っぽくといっても画像を3枚しか使っていないので物足りないかもしれませんがパララックスの雰囲気だけでも感じてもらえると思います。
特に今回はよくあるスクロールすることで動きをつけているパターンではなく、マウスカーソル位置によって動きをつけているパターンのサンプルですので皆さんの想像されている内容とは少し違うかもしれません。

サンプルデモ

見事に？noramasaの周りを猫さんが付きまとっています！
…えっ、それだけですよｗ

サンプルコード

今回はhtmlやcssは特に変わったことをしているわけではないので、重要なのはScript部分です。
途中にコメントを書いているのでだいたいの意味はわかってもらえるんじゃないでしょうか。
ザックリ説明すると、#contents内の中央からマウスカーソルがどれだけズレているかを検証して、ズレの大きさ・方向によって個々のパーツのポジションを変えているということです。
言ってしまうとマウスがズレたからパーツももっとズラしちゃおうという感じです。「ズレたから戻す」とはよく聞くけど「ズレたからもっとズラす」っていうのはなかなか面白いです！
※実装の際はjQueryを読み込むのを忘れずに！X( 

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>パララックスサンプル｜野良メモ-noramemo-</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
body{
	margin: 0;
	padding: 0;
}
#demo{
	width: 300px;
	height: 300px;
	background: #FFF;
}
.box{
	position: fixed;
	opacity: 0.9;
}
#block01{
	width: 150px;
	height: 200px;
	top: 10px;
	background: url('img/sample01.png') no-repeat left bottom;
}
#block02{
	width: 150px;
	height: 200px;
	top: 30px;
	background: url('img/sample02.png') no-repeat left bottom;
}
#block03{
	width: 150px;
	height: 200px;
	top: 50px;
	background: url('img/sample02.png') no-repeat left bottom;
}
</style>
<script>
$(function() {
	// ▼#demo内でマウスが動いた時に実行
	$('#demo').mousemove(function(e) {
		console.log(e.clientX, e.clientY);
		// ▼センターの座標を取得（本来 /2 で半分だけどここでは3にしてます）
		var cx = $(this).width() / 3;
		var cy = $(this).height() / 3;
		// ▼真ん中からマウスがどれぐらい動いたか取得
		var dx = e.clientX - cx;
		var dy = e.clientY - cy;
		// ▼マウスの動きにあわせて各々の位置変更
		$('#block01').css('left', cx　+ dx * 0.2);
		$('#block02').css('left', cx　+ dx * 0.5);
		$('#block03').css('left', cx　+ dx * 0.7);
		$('#block01').css('top', cy　+ dy * 0.1);
		$('#block02').css('top', cy　+ dy * 0.3);
		$('#block03').css('top', cy　+ dy * 0.4);
	});
});
</script>
</head>
<body>
	<div id="demo">
		<div class="box" id="block01"></div>
		<div class="box" id="block02"></div>
		<div class="box" id="block03"></div>
	</div>
</body>
</html>

まとめ

正直なところ、これを説明するのはなかなか難しいので今も頭が混乱しています。
ただ、ひとつひとつのコードの意味はそこまで複雑なものではないので、興味のある方は結構すんなりと出来てしまうかもしれませんよ。
個人的には、もう少しガリガリ動くパララックスサイトをしっかり設計してから試してみるべきだったなと反省しています。なんとなく遊び感覚のまま終わってしまった気がして…ということで機会があればしっかりサイトの設計を行ったうえで面白い表現を取り入れて作ってみようと思います:)

以上、@noramasaでした！

ぜひ関連記事もご覧ください:D