jquery.jInvertScroll.jsを使ってパララックス効果的にブラウザを横スクロール

jquery.jInvertScroll.jsを使って3つの横長画像をブラウザをパララックス効果的に横スクロール表示してみます。

1．CSSの記述例

<style>
body{
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
	padding: 0;
	margin: 0;
	overflow-x: hidden;
}
h1{
	font-size:18px;
	line-height:1.6em;
	text-align:center;
	font-weight:normal;
	padding:10px 0;
}
.scroll
{
  position: fixed;
  bottom: 0;
  left: 0;
}
.horizon
{
  z-index: 1;
  width: 3000px;
}

.middle
{
  z-index: 500;
  width: 4000px;
}

.front
{
  z-index: 1000;
  width: 6000px;
}
</style>

2．HTMLの記述例

<div class="horizon scroll"><img src="horizon.png" alt=""></div>


<div class="middle scroll"><img src="middle.png" alt=""></div>


<div class="front scroll"><img src="front.png" alt=""></div>

3．読込むJsファイルとJavaScriptの記述例

<script type="text/javascript" src="jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="jquery.jInvertScroll.js"></script>
<script type="text/javascript">
(function($) {
	$.jInvertScroll(['.scroll'],
		{
			height: 6000,
			onScroll: function(percent) {
				console.log(percent);
			}
	});
}(jQuery));
</script>

jquery.jInvertScroll.jsを使ってパララックス効果的に横スクロールするデモ

ソース元：jInvertScroll – A lightweight jQuery horizontal Parallax scrolling plugin

ブラウザのスクロール時にレイヤーでわかれたコンテンツが時間差で表示されるイメージですかね。