スマートフォン対応するパララックス（視差効果）のあるWEBコンテンツを実装できるスクリプトです。
スマートフォンのジャイロセンサーの値を取得してパララックス効果を実装できるようです。

デモのデザインもGoodでクリエイティブを刺激してくれます！
立体感のあるユニークなデザインのWEBコンテンツが作れますね。

まずjQuery本体とプラグインをwebサイトに読み込みます。

<script src="scripts/jquery.js"></script>
<script src="../deploy/jquery.parallax.js"></script>

でバインドしたいIDを指定。

<script>
$('#scene').parallax();
</script>

HTMLもシンプルですので、実装しやすいですね。

<div id="container" class="container">
		<ul id="scene" class="scene">
			<li class="layer" data-depth="1.00"><img src="images/layer1.png"></li>
			<li class="layer" data-depth="0.80"><img src="images/layer2.png"></li>
			<li class="layer" data-depth="0.60"><img src="images/layer3.png"></li>
			<li class="layer" data-depth="0.40"><img src="images/layer4.png"></li>
			<li class="layer" data-depth="0.20"><img src="images/layer5.png"></li>
			<li class="layer" data-depth="0.00"><img src="images/layer6.png"></li>
		</ul>
</div>	

WEBサイト制作、ホームページ作成時、クールでイントラクティブなWEBデザイン製作に実装したいスクリプトです。

parallax.js