jQueryのプラグインに頼らずにフワフワと文字や画像などのオブジェクトを動かそう！の別バーションを作ってみた。

2014/10/07
- JavaScript
- jQuery

少し前にjQueryプラグインを使わずに文字や画像のオブジェクトを動かす方法を紹介しましたが、今回はランダム要素を排除した別バーションです。

吹き出しなどに使えるかも！

動作サンプル

まずは動作サンプルです。
移動は上下交互で、移動距離は15px。

WEB-LABO

※パラメータを変更することで操作間隔や移動距離を簡単に変更できます。
※他のオブジェクトと重なるようにしてみました！

準備するもの

まずは動作対象の準備です。動かすものは文字でも画像でも構いませんがjQueryを使うのでマークアップした要素にid名かclass名を付けておきます。

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

今回も、div要素にidで「txt」というid名を付けました。

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

jQueryのanimateメソッドを使い、topプロパティの値を変化させることで動かしますので、「position: relative;」または「position: absolute;」を指定します。今回は相対座標指定のrelativeを使用しました。その他は自由で構いません。

よくあるミスがjQuery本体の読み込み忘れ！

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

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

最後にスクリプトの記述です。

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

	setInterval(function(){
		y *= sw;

		$("#txt").animate({
			"top": y+"px"
		},{
			'duration': 1800,
			'easing': 'swing'
		});

		sw *= -1;

	},2000);

});
</script>

今回も変数は２つ。

変数yは、移動距離（ピクセル数）です。この値を上下移動します。移動距離を変更したい場合は、この値を変更します。

変数swは、フラグ用の変数なので値を変更する必要はありません。この値を「1 → -1 → 1 → -1 → 1 → -1」と交互に入れ替え、変数yと乗算することで上下移動を実現しています。

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

setInterval(function(){
 
//一定間隔で繰り返す処理を記述
 
} , 間隔);

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

繰り返す間隔は数値で指定し、1000を指定すると1秒間隔になります。500だと0.5秒間隔です。ゆっくり動かすには数値を大きく、小刻みに動かすには数値を小さくします。

但し、今回はこの値をゼロにしても小刻みには動きません。これは、jQueryのanimateメソッドでdurationを指定しているからです。このdurationは動作開始から動作完了までの時間を指定します。「’duration’: 1800」を指定していますので移動に1.8秒かかることになります。小刻みに動かすには、この値を小さくしてください。