Home
CSS
【jQuery】順番に要素が出てくるアニメーション

【jQuery】順番に要素が出てくるアニメーション

【jQuery】順番に要素が出てくるアニメーション

どうも!かけちまるです!

今回はjQueryで要素を順番にポンポンポンてな感じでアニメーションさせる方法を解説します。

今回目指すのはこんな感じのやつです。

See the Pen by kakechimaru (@kakechimaru) on CodePen.

こんなのCSSのtransition-delayをあてればいいじゃん!と思うかも知れません。

でも、

  • ・要素が頻繁に更新されて増えたり減ったりする時
  • ・単純に要素の数が多い時

など一つずつtransition-delayをあてていくと地味に大変な作業だったりしませんか?

その作業はjQueryを数行書くだけでやらなくて良くなります。

順番にアニメーションを実行

さっそくHTML、CSS、jQueryのコードを紹介します。

HTML

HTMLは簡単な構造でbox達をbox_wrapで囲んでいるだけです。

HTML
コピー
<div class="box_wrap"> <div class="box">サンプルボックス</div> <div class="box">サンプルボックス</div> <div class="box">サンプルボックス</div> <div class="box">サンプルボックス</div> <div class="box">サンプルボックス</div> <div class="box">サンプルボックス</div> <div class="box">サンプルボックス</div> <div class="box">サンプルボックス</div> <div class="box">サンプルボックス</div> <div class="box">サンプルボックス</div> </div>

CSS

CSSも軽く見栄えを整える程度です。
.box.readyを追加することでアニメーションさせたいので最初は.boxが見えないようにopacity: 0;にしています。

CSS
コピー
.box_wrap{ margin-left: auto; margin-right: auto; width: 70%; } .box{ background: #e6e6e6; display: flex; align-items: center; justify-content: center; margin-top: 30px; width: 100%; height: 50px; opacity: 0; transform: translateY(20px); transition: all 0.8s cubic-bezier(0,1.2,1.0,1.0); } .box.ready{ opacity: 1; transform: translateY(0px); }

jQuery

コードの後に何をしているか説明しています。

jQuery
コピー
$(window).on('scroll', function(){ let scrollTop = $(window).scrollTop(); let winH = $(window).height(); if($('.box_wrap').offset().top - winH * 0.5 < scrollTop){ $('.box_wrap').find('.box').each(function(index){ $(this).delay(index * 300).queue(function(){ $(this).addClass('ready'); }); }); } });

スクロールアニメーションについては理解しているとして割愛させていただきます。
スクロールアニメーションについてはこちらの記事が参考になるかも知れません。

7行目
each()メソッドで.box_wrap内の.boxの数だけ処理をします。
functionの引数であるindexには、.boxのindex番号が入ります。
index番号は0からは始まります。

8行目
セレクタにはthisを設定します。
ここではthisはひとつひとつの.boxを指します。

delay()メソッドでアニメーションを遅らせます。
index * 300によって1番最初の.boxindexが0なので遅延は発生しません。
2番目の.boxからは300msずつ遅延する仕組みです。

queue()メソッドで前に実行したアニメーションが終わってから次のアニメーションを実行します。

9行目
セレクタにはthisを設定します。
ここでもthisはひとつひとつの.boxを指します。

addClass()メソッドで.box.readyクラスを追加します。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

floatで失った要素の高さを取り戻す2つの方法

floatで失った要素の高さを取り戻す2つの方法

【雪を降らせる】particles.jsを使って簡単にアニメーション

【雪を降らせる】particles.jsを使って簡単にアニメーション

【基本編】JavaScriptのマウスイベントでドラッグ&ドロップ機能を実装する

【基本編】JavaScriptのマウスイベントでドラッグ&ドロップ機能を実装する

webpack環境で画像追加を監視して自動圧縮&WebP変換する方法

webpack環境で画像追加を監視して自動圧縮&WebP変換する方法

【JavaScript】ボタンを押した時の効果音を実装する方法

【JavaScript】ボタンを押した時の効果音を実装する方法

【WordPress】画像アップ時に自動生成されないようにする方法

【WordPress】画像アップ時に自動生成されないようにする方法