0%

Programmingプログラミングナレッジ

Posted:2019.09.01

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

リスト型のナビゲーションなど、複数の要素が並列に配置された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を組み合わせることで、アニメーションの表現も広がるのではないでしょうか。工夫次第ではいろんな動きも可能になるので、ぜひ試してみてください。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】