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

ゆらゆら

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

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

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

 

動作サンプル

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

WEB-LABO

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

 

準備するもの

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

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

 

続いてCSSを指定します。

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

 

 

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

今回も変数は2つ。

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

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

PR

 

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

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

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

 

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

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

 

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

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

 

実際はこちら

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

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

 

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

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

 

補足

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

その他のTechWebTipsはこちら

PR

関連記事