jQueryのプラグインに頼らずに文字や画像をゆらゆら動かそう！

2014/10/08
- JavaScript

今週2本目の記事ですが、これが先週授業でやったTechWebTipsです。

文字や画像などをCSS3のtransform:rotate()をJavaScriptで操作することで「ゆらゆら」させます。「ゆらゆら」「ふわふわ」どう違うんだ？って話ですが（笑）

ちなみに「ゆらゆら」は、↓ こちら

動作サンプル

まずは動作サンプルです。
左右に＋－10度回転させています。

WEB-LABO

※閲覧環境（ブラウザ）によっては動かない可能性があります。
※パラメータを変更することでスピードや角度を簡単に変更できます。

準備するもの

まずはHTMLで動作対象を準備します。
動かすものは文字でも画像でも構いません。

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

今回はjQueryではなく、JavaScriptのDOMで直接操作しますのでclass名は不可です。id名を付けておきます。今回も、div要素にidで「txt」というid名を付けました。

続いてCSSを指定します。

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

今回は、特別必要な指定はありません。

最後にスクリプトです。
今回は、jQueryを使いませんので、jQueryの読み込みも不要です。

<script type="text/javascript">
var angle=0,sw=1;

setInterval(function(){
	angle += sw;

	document.getElementById("txt").style.transform = "rotate(" + angle + "deg)";

	if(angle&lt;-10 || angle&gt;10){
		sw *= -1;
	}

},20);
</script>

今回も変数は２つ。

変数angleは、回転させるための角度を格納します。

変数swは、これまで同様フラグに使用します。回転を右左右左と切り替えるので、最初に1を代入しておいて、設定した角度に達した場合に-1を掛けることで「1　→　-1　→　1　→　-1　・・・」と交互になるようにします。

一定間隔で繰り返す処理は今回もsetInterval を使います。

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

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

繰り返す間隔は数値で指定し、1000を指定すると1秒間隔になります。今回は20を指定しているので0.02秒間隔となります。今回は、jQueryのanimateを使わずに直接制御するので、間隔を短くします。

指定した間隔で変数swの値を加算することで、オブジェクトの角度が1度ずつ増減していきます。

　
angle += sw;

「angle += sw;」は「angle = angle + sw;」と同じです。

CSS3のtransform:rotate()を使ってオブジェクトを回転させます。

　
transform: rotate(30deg);

これでオブジェクトを右に30度回転させます。ここの30を変数にして変化させることでリアルタイムに回転させます。

実際はこちら

　
document.getElementById("txt").style.transform = "rotate(" + angle + "deg)";

getElementByIdで対象を指定しますので、対象はidで名前を付けておく必要があります。

変数angleに格納されている値を文字列連結で使用します。

このif文で変数angleの上限と下限を判断しています。

if(angle<-10 || angle>;10){
	sw *= -1;
}

変数angleが10より大きくなるか-10より小さくなれば、変数swを反転させます。

補足

コードをシンプルにするためにベンダープレフィックスは付けていません。JavaScriptでベンダープレフィックスを設定するにはコチラが参考になります。

JavaScript でベンダープレフィックスつきの CSS プロパティを設定する

その他のTechWebTipsはこちら

動作サンプル

準備するもの

補足

関連記事