memocarilog

jQueryプラグインというものを作ってみたくて、以前作った「カーソルの動きに合わせて動くパララックスを作る方法」のコードをプラグイン化してみました。

基本的な動きは以前と同じくカーソルの動きに合わせて画像がグルグル動くというものですが、プラグイン化するにあたって、背景画像を動かしたり、逆方向に動かしたりできるオプションを作りました。

動作確認ブラウザ

IE7+、GoogleChrome、Firefox、Opera

サンプルデモ

サンプル1 画像を動かすサンプルデモ

並べた画像がカーソルに合わせて動きます。デフォルトの動きです。
jQuery.Simples3D.js Sampledemo | Example1

サンプル2 背景画像を動かすサンプルデモ

背景画像に設定した画像がカーソルの動きとは逆方向へ動きます。
jQuery.Simples3D.js Sampledemo | Example2 bgImage:true

ダウンロード

以下よりダウンロードできます。
github.com/SaoriMiyazaki/jQuery.Simple3D

使い方

HTMLコード

以下のように画像が入った要素をボックス要素で囲み、親ボックスに id や class を振ります。親と子の関係が出来ていれば、マークアップする要素はなんでもよいです。

<div id="simple3D">
	<p><img src="images/star.png" alt="star" ></p>
	<p><img src="images/dot.png" alt="dot"></p>
	<p><img src="images/kinocomini.png" alt="kinoco"></p>
	<p><img src="images/meat.png" alt="meat"></p>
</div>

サンプル1はリスト形式で以下のようにマークアップしています。

<ul id="simple3D">
	<li><img src="images/star.png" alt="star" ></li>
	<li><img src="images/dot.png" alt="dot"></li>
	<li><img src="images/kinocomini.png" alt="kinoco"></li>
	<li><img src="images/meat.png" alt="meat"></li>
</ul>

サンプル2では空のボックスを設置し、CSSで背景画像を設定しています。

<div id="simple3D">
	<div class="dot"></div>
	<div class="kinoco"></div>
	<div class="star"></div>
</div>

CSSコード

CSSでは、横と縦のサイズ設定を行って下さい。その際に必ず親サイズよりも子のサイズの方が大きくなるように設定して下さい。そうしないとスクリプトが正常に動きません。

画像を動かす時

#simple3D {
	max-width: 750px;
	height: 450px;
}
#simple3D li{
	width: 850px;
	height: 600px;
}

背景画像を動かす時

背景画像を動かす時には親要素へ position: absolute; または position: relative; の指定をして下さい。

#simple3D {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 900px;
}
#simple3D div {
  width: 120%;
  min-height: 1100px;
}
#simple3D div.dot {
  background: url(../images/dot2.png);
}
#simple3D div.kinoco {
  background: url(../images/kinoco.png);
}
#simple3D div.star {
  background: url(../images/star.png);
}

jQueryコード

以下のように head 内で jQuery 本体とプラグインファイルを読み込みます。

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.simple3D.min.js"></script>

続けて以下のように jQuery.Simple3D プラグインを呼び出します。
「$(“#simple3D”)」には動かしたい画像の親要素を指定して下さい。

<script>
$(function(){
	$("#simple3D").simple3D();
});
</script>

サンプル1のデフォルトの動きならこれだけでOKです。

動きを大きくする

動きを大きくする場合は以下のようにオプションを設定します。

<script>
$("#simple3D").simple3D({
	moveX:5,
	moveY:5
});
</script>

moveX は横方向の動きの設定、moveY は縦の方向の動きの設定です。設定できる数字は 1〜5 までで、数字が大きくなると動きも大きくなります。

親ボックスの大きさと子（画像）の大きさをCSSで設定する時に、子と親の大きさの差が大きいほど動きも大きくなります。その辺で動きを調整することも可能です。

背景画像を動かす

背景画像を動かす場合は以下のようにオプションを設定します。

<script>
$("#simple3D").simple3D({
	bgImage:true
});
</script>

有効エリアの変更

スクリプトが有効となるエリアをデフォルトの「セレクタ指定したボックスにカーソルが乗ってる時」から「画面上にカーソルが乗ってる時」へ変更することができます。サンプル２がその例です。画面にカーソルが乗ってる時に画像を動かすようにするには以下のようにオプション設定します。

<script>
	$("#simple3D").simple3D({
		targetAll:true
	});
</script>

逆方向へ動かす

動きをカーソルとは反対の方向へ動かすには以下のようにオプション設定します。

<script>
	$("#simple3D").simple3D({
		reverseX:true,
		reverseY:true
	});
</script>

reverseX:true が横方向に対しての設定で、reverseY:true が縦方向に対しての設定です。

オプションのデフォルト

以下オプションのデフォルト一覧です。

moveX: 3 ,
moveY: 3 ,
bgImage: false,
targetAll: false,
reverseX: false,
reverseY: false

お願い

ご使用頂いたり、コードを見ていただいたりしておかしい点が見つかったら、コメント欄やコンタクトフォーム、Twitter（@memoca_）にご連絡頂けるとうれしいです。よろしくお願いします。