【jQuery】特定の秒数で画像などの要素を順番に回転させて表と裏の要素を交互に表示する方法

昨日にこんなブログを書きました。

記事の最後の方にサンプルを設置したのですが、ぱっと見何があるのかわからないので、文章で「 ※クリックすると回転します。 」と補足を入れています。

回転する要素に「ここをクリック!」とか入れてしまえば良いのかもしれませんが、ちょっと不親切だと思ったので、今回は勝手に回転するギミックを追加してみました。

指定した秒数で処理をさせるsetInterval関数を設定する

前回使用した下記の要素を回転させてみましょう。
※裏にも要素が仕込んであります。

表の見出し

裏の見出し

HTMLタグを記述する

今回は一つの要素だけでなく、複数の要素を順に回転させるコードも書きたいので、以前に設置していたid属性を外しておきます。
また、前回のコードと区別がつくように id=”rotate-area”がついていた要素をクラスに変えておきます。
実際のHTMLタグは下記になります。

jQueryのコードを記述する

先ほどの要素に対してsetInterval関数を仕掛けて自動で回転させます。
setInterval関数の詳しい説明は下記記事をご覧ください。
参考: JavaScriptでsetIntervalを使う方法【初心者向け】 | TechAcademyマガジン

スクリプトは下記になります。

実際に動かしてみると下記のようになります。

表の見出し

裏の見出し

処理の間隔を1秒にしているのでやや早い回転ですが、しっかり回りました。
一つの要素の回転だけならこれで十分対応できますね。

複数の要素を時間差で動かしてみる

先ほどのコードは一つの要素に対して回転をさせていましたが、もっと見栄えをよくするために時間差で複数の要素を回転させてみます。

HTMLタグを記述する

classが被ってしまうと他の要素にも影響してしまうので、ちょっとclassタグを変えて複数の要素を設置します。

単純に同じような要素を三つ並べているだけになります。

jQueryのコードを記述する

こちらもHTMLタグに合わせてjQueryで操作する箇所を変更します。
また、今回は1秒ごとの処理で特定のどれか一つの要素を回転させなければならないため、処理ごとに回転する要素のindex値を毎回確認・更新して処理をしています

上記のHTMLタグとスクリプトを設置することで、下記のように順番に回転するギミックを仕掛けることができます。

表の見出し

裏の見出し

表の見出し

裏の見出し

表の見出し

裏の見出し

今回紹介したjQueryのコードは、微妙に重複する処理があるのでもう少し行数を圧縮することができそうですね。

もっと良い方法を思いついたらコメントでいただけるとありがたいです!

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です