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

この記事では、jQueryのプラグインであるjInvertScroll.jsを使用して、3つの横長画像をパララックス効果で横スクロールする方法について詳しく解説します。
パララックス効果は、スクロール時に異なる速度でコンテンツが動くことで、立体感を演出する技術です。わかりやすく、ステップバイステップで説明しますので、ぜひ試してみてください。

Contents

必要なファイルと準備
CSSの設定
HTMLの記述
JavaScriptの設定
jquery.jInvertScroll.jsを使ってパララックス効果的に横スクロールするデモページ
まとめ

必要なファイルと準備

まず、必要なファイルを用意します。以下のファイルをダウンロードしてプロジェクトに追加してください。

jQueryライブラリ
jInvertScroll.js

　
これらのファイルをHTMLに読み込みます。

CSSの設定

CSSを設定します。各画像がパララックス効果で異なる速度でスクロールするためのスタイル（.scroll）を指定します。

<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の記述

HTMLファイルでは、パララックス横スクロールエリア（class=”scroll”）に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>

JavaScriptの設定

JavaScriptでは、jInvertScroll.jsを利用してパララックス効果を設定します。スクロール時に各画像が異なる速度で動くように設定します。

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>