inview.jsを用いた要素が順番に表示されるアニメーション

備忘録としてメモ。

要素が順に表示されるアニメーションを「inview.js」を用いて実装しました。
※jQuery使用。

以下がソース。

order.html　

         <ul class="box js-inview" id="box01">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <ul class="box js-inview" id="box02">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <ul class="box js-inview" id="box03">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>

order.scss　

.box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  li {
    width: 23%;
    height: 200px;
    list-style: none;
    margin-bottom: 20px;
    // 最初は見えないようにしておく
    opacity: 0;
  }

  &+ .box {
    margin-top: 300px;
  }
}

.js-inview {
  .js-showed {
    animation: fadeIn01 .9s ease-out forwards;
  }
}

@keyframes fadeIn01 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#box01 {
  li {
    background: rgb(107, 230, 55);
  }
}

#box02 {
  li {
    background: rgb(230, 228, 55);
  }
}

#box03 {
  li {
    background: rgb(230, 160, 55);
  }
}

order.js　

$(function() {
  $('.js-inview').on('inview', function(event, isInView) {
    if (isInView) {
      $(this).find('li').each(function(i) {
        $(this).delay(100 * i).queue(function() {
          $(this).addClass('js-showed ').dequeue();
        });
      });
    }
  });
});

簡単に説明すると、

１、要素「.js-inview」が画面内へ入ったら
２、その入り込んだ要素「.js-inview」の中から「li」を探し、
３、その「li」に対し繰り返し「js-showed」クラスを与える。

最初は「opacity:0」で隠しておき、keyframeでアニメーションを付与しています。