Photoshopなどのグラフィックソフトウェアなどに搭載されているレイヤー (Layer) とは、画像をセル画のように重ねて使うことができる機能です。

このレイヤーごとに動きを出すことで、アニメーション風に立体感を出すことが出来る便利なjQueryが 「jQuery zLayers Parallax Plugin」です。

サンプルを作ってみましたので、ご覧下さい。

→ 「jQuery zLayers Parallax Plugin」サンプル


設定方法

jQuery zLayers Parallax Pluginからファイル一式をダウンロードします。
<head>部分にcssをを指定します。
cssではキャンバスのサイズや初期設定を行なっています。z-indexは重なる順番です。

#container {width:幅; height:高さ; overflow:hidden; position:relative;} //キャンバスサイズ
.class1名 {z-index:1; margin-left:-25px;position:absolute;}
.class2名 {z-index:2; margin-left:-25px;position:absolute;}
.class3名 {z-index:3; margin-left:-25px;position:absolute;} // 以下使用する画像分指定

続いて、JavaScriptを設定すれば準備完了です。

$(‘.class1名’).zlayer({mass:15,confine:’y’,canvas:’#container’});
$(‘.class2名’).zlayer({mass:15,force:’push’,canvas:’#container’});
$(‘.class3名’).zlayer({mass:7,force:’push’,canvas:’#container’});    // 以下使用する画像分指定

値の説明は以下の通りです。
mass:  //移動距離の制限
confine:’y’, //設定するとy軸に動かさなくなる
force:  //マウスに対する動き。デフォルトではpush。pullにするとマウスと逆に反応。(push/pull)
canvas:’#container’  //対象要素を指定

最後に<body>部の画像を入れたい部分に 以下のようにdivと入れたい画像のコードを追加します。
<div id=”container”>
<img src=”画像パス” />
<!– 以下使用する画像分 –>
</div>

サンプルページのソースは以下のようになります。ご参考までに。

この記事と関連してると思われる記事: