【JQuery】コピペOK！「1つ目の要素が画面に入ったら順番にフェードインする」

こんばんは。

今回は青根高伸も流暢に喋るレベルの備忘録です。

 

「画面をスクロールしたら、要素が順番にフェードインする」

これ、よくやりますよね。

 

私はいっつもやり方忘れてググる（死語？）んですが、毎回出てくるのは「時間差でフェードインする（＝画面に入ったら少し待ってからフェードインする）」なんですよね。

そうじゃないんだよ！

横並びの時はいいけど、縦並びの時はこれだと困るんです！

時間差は時間差なんだけど、やりたいのは「1つ目の要素が画面に入ったら、順番にフェードインする」なんです！

 

何が違うかっていうとJQueryが発火する場所。

Google検索でよく出てくるのは、「要素自信が画面に入ったら発火」のパターンばかりで。

発火タイミングはあくまで「1つ目の要素が画面に入ったら発火」なの！！

 

 

という訳でコードです。

フェードインはfadeIn()ではなくクラス付与で実施しています。

 

■html

<div class="fade">
  <div class="fade-item">要素1</div>
  <div class="fade-item">要素2</div>
  <div class="fade-item">要素3</div>
</div>

 

■CSS

.fade-item {
  opacity: 0;
  transition: opacity 0.5s
}
.fade-item.start {
  opacity: 1;
}

 

■JQuery

$(function() {
  function fadeInSequence() {
    $('.fade').each(function() {
      const fadeTop = $(this).offset().top;
      const scroll = $(window).scrollTop();
      const windowHeight = $(window).height();

      // .fade が画面に入ったら
      if (scroll > fadeTop - windowHeight + 100) {
        const $items = $(this).find('.fade-item');

        $items.each(function(i) {
          const $this = $(this);
          setTimeout(function() {
            $this.addClass('start');
          }, i * 300); // 順番に0.3秒間隔で追加
        });
      }
    });
  }

  // スクロール時だけでなくロード時にも発火
  $(window).on('scroll load', fadeInSequence);
});

 

 

はい、これでそれぞれの要素が独立することなく、ちゃんと連動したフェードインができました。

 

息ピッタリの連携！

これぞ伊達の鉄壁！！！