以前は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>