Zenn
🌽

JavaScriptで要素を順番にフェードイン

2024/09/26に公開
JavaScript
tech


要素を順番にフェードインさせる方法はjQueryを使っているものが多かったので、JavaScriptで同じアニメーションが作成したくて試しました。

ある要素の中の画像を、左から順番にフェードインさせます。
このアニメーションの使い所は以下のような場所におすすめです。

  • ファーストビューで横に並んでいる複数の画像
  • リスト要素
  • カード部分

コード

結論のコードです。
ポイントはのちほど解説します。

    <div class="l-container">
      <p>左から順番にフェードイン</p>
      <div class="image__list">
        <img src="./img/ebi.png" alt="えび" width="400" height="396">
        <img src="./img/ebi.png" alt="えび" width="400" height="396">
        <img src="./img/ebi.png" alt="えび" width="400" height="396">
        <img src="./img/ebi.png" alt="えび" width="400" height="396">
      </div>
    </div>

.l-container {
  max-width: 1200px;
  margin: 100px auto;
}
.image__list {
  display: flex;
  align-items: center;
  justify-content: center;
}
.image__list img {
  opacity: 0;
  width: 200px;
  height: auto;
}
.image__list img.show {
  opacity: 1;
  animation-name: showOrder;
  animation-duration: 1s;
}

@keyframes showOrder {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

document.addEventListener("DOMContentLoaded",()=>{
    const circleImages = document.querySelectorAll('.image__list img');
    circleImages.forEach((circleImage,index)=>{
      setTimeout(()=>{
        circleImage.classList.add('show');
      },index * 800)
    });
  });

JSの解説

addEventListenerでページが読み込まれたら（DOMContentLoaded）、画像のひとつひとつへshowクラスをつけています。
index * 800の部分は、読み込まれた画像の「何番目」×「秒数」としています。これにより、1×800ミリ秒、2×800ミリ秒…と順番にアニメーションがつく仕組みです。画像の枚数分このアニメーションが実行されます。

CSSの解説

keyframesでshowOrderアニメーションを作りました。徐々に要素が表示されるアニメーションのためには必須です！
showOrderアニメーションをつけないと、順番には表示されますがいきなりopacity: 1;の状態で出てくるので少し不自然です。

まとめ

記事にするか悩むレベルで短く済んでしまいました。
jQueryでも同じアニメーションは作成できますが、最近の使用状況や将来性・スケーラビリティ・パフォーマンスを考えるとJavaScriptがおすすめです！！

小さなパーツだとJavaScriptの恩恵があまり感じられませんが、サイトが大きくなるにつれてJavaScriptの軽量さが実感できるはずです。
また、最初からJavaScriptで書いておけばjQueryからJavaScriptに書き直す作業も発生しません。
私もJavaScriptでアニメーションができるよう練習中です〜〜

Discussion