WEB-LABOjQueryのプラグインに頼らずに文字や画像をゆらゆら動かそう!2014/10/08JavaScriptツイート今週2本目の記事ですが、これが先週授業でやったTechWebTipsです。文字や画像などをCSS3のtransform:rotate()をJavaScriptで操作することで「ゆらゆら」させます。こちらjQueryのプラグインに頼らずにフワフワと文字や画像などのオブジェクトを動かそう!jQueryのプラグインに頼らずにフワフワと文字や画像などのオブジェクトを動かそう!の別バーションを作ってみた。動作サンプルまずは動作サンプルです。左右に+-10度回転させています。WEB-LABO※閲覧環境(ブラウザ)によっては動かない可能性があります。※パラメータを変更することでスピードや角度を簡単に変更できます。準備するものまずはHTMLで動作対象を準備します。動かすものは文字でも画像でも構いません。今回はjQueryではなく、JavaScriptのDOMで直接操作しますのでclass名は不可です。id名を付けておきます。今回も、div要素にidで「txt」というid名を付けました。続いてCSSを指定します。impact;}</style>今回は、特別必要な指定はありません。最後にスクリプトです。今回は、jQueryを使いませんので、jQueryの読み込みも不要です。-1;}},20);</script>今回も変数は2つ。変数angleは、回転させるための角度を格納します。変数swは、これまで同様フラグに使用します。・・・」と交互になるようにします。