jQuery を使ったパララックス効果 jParallax
画像を水平や垂直に移動させることによって奥行き感を出すのをパララックス効果と呼びますが、これをWebデザインで実装してみようってことで、以前のテーマでスタイルシートを使ったパララックス効果を使ってみましたが、今回はjQueryを使ったパララックス効果jParallaxに挑戦。jQueryを使うだけあって、とても動きが滑らかです。
パララックス効果
まずはjQueryとjquery.jparallax.jsをダウンロードしてきます。次に画像ですが、.png形式のものを好みで用意。グラフィックを作るときに、奥になる画像は少しぼかして彩度を落としてみたり、手前の画像は相対的に大きめにしておいたりするとより効果が分かりやすいです。
HTMLの記入 <head>の中
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jparallax.js"></script>
<script type="text/javascript">
<!--
jQuery(document).ready(function(){
jQuery('#parallax').jparallax({});
});
//-->
</script>
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->
まず、jQueryを呼び出して、次にjParallaxを呼び出し(‘#parallax’)で動作開始の宣言をします。[if lt IE 8] の部分はIE6.0での.pngの透過部分の表示を可能にするために使用。IE6.0で別のスタイルシートを使用する場合は必要なしです。本家サイトではiFixPng pluginを利用してIE6.0対策をするとなっていますが、私はGoogle codeを使っています。
HTMLの記入 <body>の中
<div id="head">
<h1><a class="sitename" href="#">Paraglider</a></h1>
<div id="parallax">
<img src="images/para01-trans.png" alt="" style="width: 1100px; height: 200px; top: 50%; position: absolute; left: 27.4763%; margin-left: -313.23px; margin-top: -112px;" />
<img src="images/para02-trans.png" alt="" style="width: 1015px; height: 200px; top: 50%; position: absolute; left: 27.4763%; margin-left: -307.735px; margin-top: -112px;" />
<img src="images/para03-trans.png" alt="" style="width: 1035px; height: 200px; top: 50%; position: absolute; left: 27.4763%; margin-left: -285.754px; margin-top: -112px;" />
<img src="images/para04-trans.png" alt="" style="width: 770px; height: 200px; top: 50%; position: absolute; left: 27.4763%; margin-left: -281.083px; margin-top: -112px;" />
</div>
これで基本的には動作します。が、見た目がずれておかしくなるので、スタイルシートを使って形成します。ポイントは#parallaxで画像の表示幅と高さを決めてposition:absolute;を使って固定させるといいようです。
IE8.js Google codeを使っているのでロゴ部分やその他（背景など）の.png画像表示も名前に-transを入れるだけで何もしなくてもOKです。※IE8.js Google codeの使い方については、【XHTML＋CSS】06_CSSデザインのブラウザ調整 を参考にさせていただきました。
スタイルシートの書き方がわからなくって大変で、コンポーネントがあれば助かるなと思ったので自分でコンポにしてみました。よければどうぞお持ち帰り下さい。（同梱のグラフィックスは自分のものを使ってくださいね）
余談ですが･･･なんで、IEってバージョンによってこんなに表示が違うねんと改めて思ってしまいました。IE7.0で.pngに対応したのはよしとして、ほほ～こうくるかってな感じで予想できない崩れ方をしてくれますよね。
ブラウザチェックが大変です。ほんまコーダー泣かせやわ～
一応、これはWinのIE6.0、IE7.0、IE8.0、Firefox、Opera、Chrome、Safariでチェックしてます。（Macでは未チェックです。。。）
ITキヲスク | 2009年9/6～9/12の週間ブックマーク Says:
September 13th, 2009 at 12:51 am
[...] パララックス効果を与えるプラグイン「jParallax」の使い方 [...]