レイヤーを動かし奥行き感を演出できるjQueryプラグイン「jQuery zLayers Plugin」

PhotoShopやFireWorksにはレイヤーという概念があります。
これを自由に動かせたら・・・と思うデザイナーもいるかもしれません。
zLayer jQuery Pluginは、マウスの動きに応じてレイヤーを動かせ、奥行き感を演出できます。
また、公式ページ上では動画により、設定方法を紹介しています。
レイヤーを動かし奥行き感を演出できるjQueryプラグイン「jQuery zLayers Plugin」サンプル

使用方法
zLayer jQuery Pluginからファイル一式をダウンロード
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jquery.zlayer.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('.class名').zlayer({
mass:5, //移動距離
confine:'y', //y軸に動かさない
force:'push', //マウスに対する動き(push/pull)
canvas:'#container' //対象要素
});
// 以下使用する画像分
});
</script>

またhtmlで下記のように記述します。
<div id="container">
<img src="画像パス" class="class名" />
<!-- 以下使用する画像分 -->
</div>

またCSSで初期位置やベースキャンバスの大きさを指定します。
#container {width:幅; height:高さ; overflow:hidden; position:relative;}
.class名 {z-index:1; margin-left:-188px;position:absolute;}

※topなどではなくネガティブマージンを推奨しているようです。
レイヤーを動かし奥行き感を演出できるjQueryプラグイン「jQuery zLayers Plugin」サンプル

sponsors

「レイヤーを動かし奥行き感を演出できるjQueryプラグイン「jQuery zLayers Plugin」」をシェアする

記事作成:
記事URL:

TOP > > > レイヤーを動かし奥行き感を演出できるjQueryプラグイン「jQuery zLayers Plugin」