jQuery Parallax.jsでパララックス効果を実現する方法 | 簡単なステップバイステップガイド｜DAD UNION

今回は、jquery.Parallax.jsを使ってパララックス効果をページに実装する方法について紹介します。
パララックス効果とは、スクロール時に異なる速度で背景画像やコンテンツが動くことで、奥行き感や動きのあるデザインを実現する技術です。縦長のページなどでセクションごとに演出を加えると、視覚的に魅力的なページになります。

Contents

必要な準備
CSSの設定
JavaScriptの設定
HTMLの設定
jquery.Parallax：パララックス（Parallax）効果のデモページ
ソース元：Nikebetterworld Parallax Effect Demo | Ian Lunn
まとめ

必要な準備

パララックス効果を実現するために、以下のライブラリを使用します。

jquery.min.js（1.6.4）
jquery.parallax-1.1.3.js
jquery.localscroll-1.2.7-min.js
jquery.scrollTo-1.4.2-min.js

CSSの設定

まずは、パララックス効果を適用するためのCSSを設定します。必要に応じて変更してください。

<style type="text/css" media="all">
<!--
body{
	margin: 0;
	min-width: 980px;
	padding: 0;
}
p{
	margin: 0 0 20px 0;
}
p, ul{
	font-family:"Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size-adjust:0.488;
	font-weight:200;
	font-style:normal;
}
img{
	border: 0;
}
h1, #pixels{
	font-family:"Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size:17px;
	font-weight:bold;
}
h2{
	font-family:"Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size-adjust:0.531;
	font-weight:500;
	font-style:normal;
}
#header h1, #pixels{
	color: #48941A;
}
.float-left{
	float: left;
	margin: 0 0 0 20px;
}
.float-right{
	float: right;
	margin: 0 20px 0 0;
}
.center{
	font-size: 2.5em;
	padding: 80px 0 0 0;
	text-align: center;
}
#nav{
	list-style: none;
	position: fixed;
	right: 20px;
}
#nav li{
	margin: 0 0 15px 0;
}
#header, #intro, #second{
	width: 100%;
}
#intro{
	background:url(images/firstBG.jpg) 50% 0 no-repeat fixed;
	color: white;
	height: 600px;
	margin: 0 auto;
	padding: 0;
}
#second{
	background: url(images/secondBG.jpg) 50% 0 no-repeat fixed;
	color:#333333;
	height: 1300px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
}
#second .bg{
	background: url(images/trainers.png) 50% 0 no-repeat fixed;
	height: 1300px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 900px;
	z-index: 200;
}
#third{
	background: url(images/thirdBG.jpg) 50% 0 no-repeat fixed;
	color: white;
	height: 650px;
	padding: 100px 0 0 0;
	color:#000000;
}
#fifth{
	height: 400px;
	margin: 0 auto;
	padding: 40px 0 0 0;
}
.story{
	margin: 0 auto;
	min-width: 980px;
	overflow: auto;
	width: 980px;
}
.story .float-left, .story .float-right{
	padding: 100px 0 0 0;
	position: relative;
	width: 350px;
}
-->
</style>

JavaScriptの設定

次に、パララックス効果を実装するためのJavaScriptを記述します。
jquery、jquery.parallax-1.1.3.js、jquery.localscroll-1.2.7-min.js、jquery.scrollTo-1.4.2-min.jsを読み込みます。ページ読込後、$().parallax()でパララックス効果を出したい箇所を指定します。以下のコードをHTMLファイルの適切な場所に挿入してください。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.parallax-1.1.3.js"></script>
<script type="text/javascript" src="js/jquery.localscroll-1.2.7-min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#nav').localScroll(800);
	$('#intro').parallax("50%", 0.1);
	$('#second').parallax("50%", 0.1);
	$('.bg').parallax("50%", 0.4);
	$('#third').parallax("50%", 0.3);
})<br />
</script>

HTMLの設定

最後に、パララックス効果を適用するHTMLを作成します。
パララックス（Parallax）効果を出したいエリア（id=”intro”、id=”second”、class=”bg”、id=”fifth”）を用意します。以下のサンプルコードを参考に、必要に応じて変更してください。

<ul id="nav">

 	<li><a href="#intro" title="Next Section"><img src="images/dot.png" alt="Link"></a></li>


 	<li><a href="#second" title="Next Section"><img src="images/dot.png" alt="Link"></a></li>


 	<li><a href="#third" title="Next Section"><img src="images/dot.png" alt="Link"></a></li>


 	<li><a href="#fifth" title="Next Section"><img src="images/dot.png" alt="Link"></a></li>

</ul>


<div id="intro">

<div class="story">

<div class="float-left">

<h1>パララックス（Parallax）効果のページを表示</h1>


<h2>第1コンテンツエリアです。</h2>

第1コンテンツエリアの本文です。

</div>

</div>

<!--.story-->

</div>

<!--#intro-->

<div id="second">

<div class="story">

<div class="bg"></div>


<div class="float-right">

<h2>第2コンテンツエリアです。</h2>

第2コンテンツエリアの本文です。

</div>

</div>

<!--.story-->

</div>

<!--#second-->

<div id="third">

<div class="story">

<div class="float-left">

<h2>第3コンテンツエリアです。</h2>

第3コンテンツエリアの本文です。

</div>

</div>

<!--.story-->

</div>

<!--#third-->

<div id="fifth">

<div class="story">

<h2>第4コンテンツエリアです。</h2>

第4コンテンツエリアの本文です。

</div>

<!--.story-->

</div>

<!--#fifth-->