jQueryのプラグインに頼らずにフワフワと文字や画像などのオブジェクトを動かそう！

ふわふわ

今日のテクニカルWebデザイン（TechWeb）の授業でやった内容の復習です。

jQueryプラグインを使わずに文字や画像のオブジェクトを動かす方法を紹介します。

動作サンプル

まずは動作サンプルです。
移動は上下のみで、移動距離は-10px ～ 10px の範囲でランダムです。

WEB-LABO

※動く間隔や移動の距離などを変更することで色々と応用可能です。

 

準備するもの

　
	<div id="txt">WEB-LABO</div>
　

動かしたいものは、文字でも画像でも構いませんがjQueryを使うのでマークアップした要素にid名かclass名を付けておきます。今回は、div要素にidで「txt」というid名を付けました。

 

<style type="text/css">
	#txt{
		width: 200px;
		margin: 50px auto;
		font-weight: bold;
		font-size: 36px;
		color:#c00;
		position: relative;
		font-family: impact;
	}
</style>

「#txt」に対するスタイルですが、jQueryのanimateメソッドでtopプロパティを使って動かすので、「position: relative;」または「position: absolute;」を指定します。今回は相対座標指定のrelativeを使用しました。その他は自由で構いません。

 

　
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
　

jQuery本体の読み込みを忘れないようにしましょう！jQuery本家サイトからダウンロードして使用するか、Googleなどにホストされているファイルを使用します。よくわからない人は、この1行をhead要素内にコピペしてください。

PR

 

動作サンプル２

左右も追加し、移動距離を-50px ～ 50px の範囲でランダムにしたものです。

ふわふわ

 
 

スクリプトの記述

スクリプトについては、少しずつ解説していきます。

<script type="text/javascript">
$(function(){
	var y=0,sw=1;

	setInterval(function(){
		y = Math.floor( Math.random() * 10 )+1 * sw;

		$("#txt").animate({
			"top": y+"px"
		},1500);

		sw *= -1;

	},2000);

});
</script>

変数を２つ使用します。

変数yは、オブジェクトを上下に動かす時のピクセル数を格納します。

変数swは、上下のフラグに使用します。最初に1を代入しておいて、毎回-1を掛けることで「1　→　-1　→　1　→　-1　・・・」と交互になるようにします。

 

一定間隔で処理を繰り返すには、setIntervalを使用します。

setInterval(function(){

	//一定間隔で繰り返す処理を記述

} , 間隔);

一定間隔で繰り返す処理を{ }内に記述し、繰り返す間隔を指定します。

繰り返す間隔は数値で指定し、1000を指定すると1秒間隔になります。500だと0.5秒間隔です。

 

　
y = Math.floor( Math.random() * 10 )+1 * sw;
　

変数yに乱数を使い値を代入します。

Math.random()は、0以上1未満の乱数を発生します。これに10を掛け少数以下をMath.floor()で切り捨てます。これにより0～9の整数になります。

これに1を足し1～10の整数にし、変数swの値を掛けます。変数swには1か-1が代入されているので結果的に-10～10のランダムな値を作ることができます。

PR

 

jQueryのanimateメソッドにより、上の式で得た-10～10の乱数を使用してオブジェクトを動かします。

$("アニメーション対象").animate({
    位置などの指定
},アニメーション時間);

アニメーション対象で、動作対象を指定します。ここはCSSのセレクタの記述と同じでタイプセレクタ、idセレクタ、classセレクタ、子孫セレクタなどで指定します。

位置などの指定で、移動先の位置を指定します。今回は上下の動作なのでtopプロパティを使用します。ここで、変数yに代入した乱数を使用します。横方向も同時に指定したい場合は、leftプロパティを指定しますが、その場合はカンマで区切ります。CSSのつもりでセミコロンを使ってしまうと動きません。

アニメーション時間で、動きはじめから指定された位置までの時間を指定できます。ここも1000で1秒になります。1500を指定した場合、1.5秒かけて移動することになります。ここは、省略することも可能ですが、省略する場合はカンマと合わせて削除します。

 

ここでは、スイッチの様に変数swの値が「1　→　-1　→　1　→　-1　・・・」と交互になるようにしています。

　
sw *= -1;
　

代入演算子を使用していますが、「sw *= -1;」は「sw = sw * -1;」と記述できます。

 

まとめ

用途としては、バルーンとか吹き出しなどに使えそうです。

但し、現在は完全にランダムなので数値の出方によっては、思いもよらない位置まで移動する可能性があります。実際に使う場合は、移動範囲を限定するなどするべきでしょう。

その他のTechWebTipsはこちら

 

 

関連記事