パララックス

2013.09.19　Posted by Coding_team

Webプログラミング

みなさん、こんにちは。
ウェブラボのコーダの豊岡です。

今回はパララックス効果を与える jQuery ライブラリをご紹介いたします。
上下スクロールしてみてください。
大小のシャボン玉がそれぞれ違う速度で動いているのがわかるかと思います。

デモページはご覧頂けましたでしょうか？
大きさの異なるシャボン玉が違う速度で動いていることにより、奥行きが生まれました。

今回参考にさせていただいた jQuery ライブラリはこちら！

■ インストール方法

<!– jQuery library を読み込ませます–>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>
<!– パララックスの Javascript ファイルを読み込ませます –>
<script src=”/js/jquery.parallax-1.1.3.js”></script>
<script src=”/js/jquery.scrollTo-1.4.2-min.js”></script>
<!– パララックス用の CSS ファイルを読み込ませます。 –>
<link href=”/css/style.css” rel=”stylesheet” />

ウインドウ全体に表示されている空の部分を#sky、

シャボン玉の画像をそれぞれ .bg、.bg2 の空の div を設置します。

.bg、.bg2 はシャボン玉の画像を背景として表示しています。

<div id=”sky”>
<div class=”story”><div class=”bg”></div><div class=”bg2″></div>
<div class=”float-left”>
<h2>コレがパララックス効果です</h2>
<p>大小色々な大きさのシャボン玉に奥行きがでました。</p>
</div>
</div>
</div>

そして、アクティベートするために以下を記述します。

$(document).ready(function(){
$(‘#sky’).parallax(‘50%’, 0.1);
$(‘.bg’).parallax(‘50%’, 0.3);
$(‘.bg2’).parallax(‘50%’, 0.7);
})

関連記事こちらの記事も合わせてどうぞ。