メモ：Animate.cssの利用方法＋スクロールに応じてアニメーションさせる方法

2019年3月現在、スクロールに応じて要素をフェードインやスライドインさせるWebサイトはとても多く見られる。

こういったアニメーションを実装するのに、Animate.cssはとても便利（フェードイン、スライドイン、バウンド等、色々な種類のアニメーションを簡単に実装できるCSSライブラリ）。

ただ、Animate.cssは、それ単体で出来るのは「ページを読み込んだ瞬間にアニメーションする」ところまで。
スクロールに応じてアニメーションをさせるためには、JavaScript上で一工夫が必要らしい。

調べた結果、これらの実装の方法がわかったので、メモします。

参考になったサイト

【Animate.css】スクロールに合わせてアニメーション表示する ｜ Into the Program

Animate.cssの組込方法

▼まずはanimate.cssを読み込み。Animate.css からCSSファイルをダウンロードすることも出来ますが、ここではCDNから読み込みます。

  <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" type="text/css">

▼続けて、<body>内のアニメーションさせたい要素に”animated”というクラスと、実装したいエフェクトのクラスを付与。クラスの種類は Animate.css を参照。
これで、アニメーションは動作するはずです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" type="text/css">
  <title>TEST</title>
</head>
<body>
<h1 class="animated fadeInUp">TEST</h1>
</body>
</html>

▼アニメーションは、CSSを記述することで、アニメーションにかかる時間とディレイ時間の設定が可能（下記はfadeInUpの場合の指定）。
ちなみに、HTMLに直接指定することも可能。詳しくはAnimate.cssのドキュメンテーションを参照しよう（英語ですが）。

.fadeInUp {
  animation-duration: 0.8s;
  animation-delay: 0s;
}

スクロールに応じてAnimate.cssを起動させる

【Animate.css】スクロールに合わせてアニメーション表示する ｜ Into the Program からの引用となりますが、jQueryを読み込み、下記のようなJavaScriptを記載することで可能なようです。詳細はリンク先を確認ください。

$(window).on('load scroll', function(){
  
  $('.animated').css('opacity', '0');

  //animatedのclassを持った要素をセレクタに指定
  var elem = $('.animated');

  elem.each(function () {

    //data属性からアニメーション名を取得
    var isAnimate = $(this).data('animate');
    //animated要素に位置を取得
    var elemOffset = $(this).offset().top;
    //現在のスクロールポジションを取得
    var scrollPos = $(window).scrollTop();
    //ウィンドウの高さを取得
    var wh = $(window).height();

    //animated要素がウィンドウ内の中央位置にきたら処理
    if(scrollPos > elemOffset - wh + (wh / 2)){
      $(this).addClass(isAnimate);
    }
  });

});
0