東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

パララックス

2013.09.19 Posted by

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

今回はパララックス効果を与える 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);
})

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278