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

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

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

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

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

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

HTMLタグを記述する

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

<div class="rotate-area">
  <div class="rotate-target omote">
    <p>表の見出し<br><img src="https://www.kansuke-prg.com/wp/wp-content/uploads/2019/07/child_theme.jpg"></p>
  </div>
  <div class="rotate-target ura">
    <p>裏の見出し<br><img src="https://www.kansuke-prg.com/wp/wp-content/uploads/2019/06/42f0f3947d7ca2b1a713bfa40e4f558e_s.jpg"></p>
  </div>
</div>

jQueryのコードを記述する

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

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

<script>
  jQuery(function($){
    // 要素を回転させる関数
    function rotate_timer(){
      // 全てのrotate-areaクラスに対して処理を実行
      $('.rotate-area').each(function(index, element){
        if($('.rotate-target.omote').eq(index).css('z-index') == '0'){
          // 裏が表示されている場合
          $('.rotate-target.omote').eq(index).css({'z-index':'1', 'transform':'rotateY(0deg)'});
          $('.rotate-target.ura').eq(index).css({'z-index':'0', 'transform':'rotateY(-180deg)'});
        } else {
          // 表が表示されている場合
          $('.rotate-target.omote').eq(index).css({'z-index':'0', 'transform':'rotateY(-180deg)'});
          $('.rotate-target.ura').eq(index).css({'z-index':'1', 'transform':'rotateY(0deg)'});
        }
      });
    }
    // タイマーの起動
    setInterval(rotate_timer, 1000);
  });
</script>

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

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

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

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

HTMLタグを記述する

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

<div class="rotate-multiple-area">
  <div class="rotate-multiple-target omote">
    <p>表の見出し<br><img src="https://www.kansuke-prg.com/wp/wp-content/uploads/2019/07/child_theme.jpg"></p>
  </div>
  <div class="rotate-multiple-target ura">
    <p>裏の見出し<br><img src="https://www.kansuke-prg.com/wp/wp-content/uploads/2019/06/42f0f3947d7ca2b1a713bfa40e4f558e_s.jpg"></p>
  </div>
</div>
<div class="rotate-multiple-area">
  <div class="rotate-multiple-target omote">
    <p>表の見出し<br><img src="https://www.kansuke-prg.com/wp/wp-content/uploads/2019/07/child_theme.jpg"></p>
  </div>
  <div class="rotate-multiple-target ura">
    <p>裏の見出し<br><img src="https://www.kansuke-prg.com/wp/wp-content/uploads/2019/06/42f0f3947d7ca2b1a713bfa40e4f558e_s.jpg"></p>
  </div>
</div>
<div class="rotate-multiple-area">
  <div class="rotate-multiple-target omote">
    <p>表の見出し<br><img src="https://www.kansuke-prg.com/wp/wp-content/uploads/2019/07/child_theme.jpg"></p>
  </div>
  <div class="rotate-multiple-target ura">
    <p>裏の見出し<br><img src="https://www.kansuke-prg.com/wp/wp-content/uploads/2019/06/42f0f3947d7ca2b1a713bfa40e4f558e_s.jpg"></p>
  </div>
</div>

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

jQueryのコードを記述する

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

<script>
  jQuery(function($){
    var i_rotate_obj_num = $('.rotate-multiple-area').length; // 回転要素の個数を取得
    var i_rotate_active_index = 0; // 回転を実行する要素のindex番号
    // 要素を回転させる関数
    function rotate_timer(){
      // 全てのrotate-multiple-areaクラスに対して処理を実行
      $('.rotate-multiple-area').each(function(index, element){
        if(i_rotate_active_index == index){
          // 回転を実行するindex番号と一致する場合のみ実行
          if($('.rotate-multiple-target.omote').eq(index).css('z-index') == '0'){
            // 裏が表示されている場合
            $('.rotate-multiple-target.omote').eq(index).css({'z-index':'1', 'transform':'rotateY(0deg)'});
            $('.rotate-multiple-target.ura').eq(index).css({'z-index':'0', 'transform':'rotateY(-180deg)'});
          } else {
            // 表が表示されている場合
            $('.rotate-multiple-target.omote').eq(index).css({'z-index':'0', 'transform':'rotateY(-180deg)'});
            $('.rotate-multiple-target.ura').eq(index).css({'z-index':'1', 'transform':'rotateY(0deg)'});
          }
        }
        if(index == (i_rotate_obj_num-1)){
          // 要素の最後に到達した場合
          i_rotate_active_index++
          if(i_rotate_active_index == i_rotate_obj_num){
            // 回転する要素を最初に戻す
            i_rotate_active_index = 0;
          }
        }
      });
    }
    // タイマーの起動
    setInterval(rotate_timer, 1000);
  });
</script>

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

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

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