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);
}
});
});
