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;} //キャンバスサイズ
.class１名 {z-index:1; margin-left:-25px;position:absolute;}
.class２名 {z-index:2; margin-left:-25px;position:absolute;}
.class３名 {z-index:3; margin-left:-25px;position:absolute;} // 以下使用する画像分指定
続いて、JavaScriptを設定すれば準備完了です。
$(‘.class１名’).zlayer({mass:15,confine:’y’,canvas:’#container’});
$(‘.class２名’).zlayer({mass:15,force:’push’,canvas:’#container’});
$(‘.class３名’).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>
サンプルページのソースは以下のようになります。ご参考までに。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>画像に立体感と奥行きのある動きを演出することができるjQuery zLayers Parallax Pluginサンプル</title> <style type="text/css"> #container {width:450px; margin:auto; overflow:hidden; border:1px #000 solid; position:relative; height:450px;} .background {z-index:1; margin-left:-25px;} .cloud {z-index:2; margin-left:-25px;} .dragon {z-index:4; margin-left:-25px;} .background,.cloud,.dragon {position:absolute;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.zlayer.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.background').zlayer({mass:15,confine:'y',canvas:'#container'}); $('.cloud').zlayer({mass:15,force:'push',canvas:'#container'}); $('.dragon').zlayer({mass:7,force:'push',canvas:'#container'}); }); </script> </head> <body> <div id="container"> <img src="img/sky.jpg" class="background"/> <img src="img/cloud.png" class="cloud"/> <img src="img/dragon.png" class="dragon"/> </div> </body> </html> |
あわせてお読みください
Pop Circle クリックすると円状にメニューが飛び出すアニメーションを実現できるのが、このjQueryプラグイン「Pop Circle」です。 中央の円（…
今回は、クリックすると上から降りてくるドロップダウンメニューのソースを紹介します。 サンプルをみてもらうとわかりやすいと思います。 →「クリックするとメニューが…
高機能過ぎるjQueryスライドショー「Camera slideshow」という記事でご紹介したスライドショー「Camera slideshow」をフルスクリ…
コメントを残す