OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

JavaScriptで順番に並んだ要素を連続して動かすシーケンシャルなアニメーション実装する

最終更新日:2019.9.1 Update!!
リスト型のナビゲーションなど、複数の要素が並列に配置されたUIで使えるアニメーションをjavascriptを使って実装してみたいと思います。今回は順番に連続して要素を動かすアニメーションのサンプルになります。いわゆるシーケンシャルな動きで最近のWebデザインでもよく見かけるかと思います。   まずはHTMLからです、今回はリスト要素で用意しました。親要素にはidを指定します。複数要素が対象の場合にはclassで指定するようにします。そして子要素には同じclass名をアニメーションさせる要素全てに付与しておきます。 【HTML】※一部抜粋
<ul id="sequential_animation">
 <li class="sequential_animation_item">First Element</li>
 <li class="sequential_animation_item">Second Element</li>
 <li class="sequential_animation_item">Third Element</li>
 <li class="sequential_animation_item">Fourth Element</li>
 <li class="sequential_animation_item">Fifth Element</li>
</ul>
  CSSではレイアウトや見た目のデザインを整えていきますが、初期状態では子要素をopacityで見えないようにし、transformで横もしくは縦方向に少し移動させておきます。また、アニメーションとして成り立つようにtransitionも設定しておきます。そして、表示状態のclassがついた時のスタイルとして、透明度と位置を表示されたときに見えるよう戻しておきます。 【Sass(scss)】
#sequential_animation {
  .sequential_animation_item {
   transition: all 0.5s linear 0s;
   transform: translate(-30px,0);
   opacity: 0;
    &.show {
     transform: translate(0,0);
     opacity: 1;
    }
  }
}
  アニメーション自体はCSSで実装しますが、シーケンシャルな動きはJavaScriptで制御していきます。まずは子要素全てのDOMを取得し、forEach()の中で処理を加えていきます。ここでポイントになるのが、forEachの第二引数になります。この第二引数ではindexの値を取得できます。それをsetTimeoutの値に入れることで、時間差で処理が行われるようになります。アニメーションのトリガーとしては、表示用のclass名を子要素に付与するだけのシンプルな内容になっています。 【javascript】
function sequentialAnimation() {
 const element = document.querySelectorAll('#sequential_animation');
 element.forEach((parentItems) => {
  const childElements = parentItems.querySelectorAll('.sequential_animation_item');
  childElements.forEach((parentItems, index) => {
   const order = index + 1;
   const delay = order * 500;
   setTimeout(() => {
    parentItems.classList.add('show');
   }, delay);
  });
 });
}
sequentialAnimation();
  これで順番に連続して要素を動かすアニメーションが実装できました。今回のサンプルはこちらに用意していますので参考に。  

See the Pen sequential_animation by designsupply (@designsupply) on CodePen.

 
  近年、ウェブサイトのデザインにもアニメーションが使われているのをよく見かけます。このようにCSSとjavascriptを組み合わせることで、アニメーションの表現も広がるのではないでしょうか。工夫次第ではいろんな動きも可能になるので、ぜひ試してみてください。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram