Animate.cssとinview.jsを利用して要素が表示されたタイミングでアニメーションさせる

以前はWOW.jsを利用して簡単にアニメーションを導入するという記事のように、WOW.jsとAnimate.cssでアニメーションを導入させていたのですが、いつの間にかWOW.jsが商用利用の場合は有料となっていました。

そのためjQueryプラグインのinview.jsを利用して導入する方法を調べました。

1.Animate.cssとinview.jsとjQueryファイルを読み込む
2.ソースに以下を追加

 $(function() {
    $('.inView').on('inview', function(event, isInView) {
      if (isInView) {
        $(this).addClass('fadeInUp');
      }
    });
  });

3.classにinView animatedを記述して利用する

<div class="inView animated">
サンプル
</div>

参考：inview.jsとAnimate.cssでCSSアニメーション