jquery.jInvertScroll.jsを使ってパララックスで横スクロールする方法 DAD UNION

jquery.jInvertScroll.jsを使って3つの横長画像をパララックスで横スクロールする方法をご紹介します。

Contents

パララックスで横スクロールするCSSの記述
パララックスで横スクロールするHTMLの記述
jquery.jInvertScroll.jsを使ってパララックスで横スクロールするJavaScriptの記述
jquery.jInvertScroll.jsを使ってパララックス効果的に横スクロールするデモページ
- ソース元：jInvertScroll - A lightweight jQuery horizontal Parallax scrolling plugin

パララックスで横スクロールするCSSの記述

※パララックス横スクロールエリアの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>

パララックスで横スクロールするHTMLの記述

※3つの横長画像を用意しました。必要に応じて変更して下さい。

    <h1>マウスを縦スクロールするとパララックス効果的に3つの画像を横スクロール表示します。</h1>

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

jquery.jInvertScroll.jsを使ってパララックスで横スクロールするJavaScriptの記述

※jquery-1.8.1.min.js、jquery.jInvertScroll.jsファイルを読み込みます。$.jInvertScroll([‘横スクロールするエリア’],{オプション})でパララックス横スクロールするエリアに対して高さやスクロール時のアクションを設定します。

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