🌽
JavaScriptで要素を順番にフェードイン
要素を順番にフェードインさせる方法は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