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

こんにちは、Ryohei（@ityryohei）です！

Animate.css、便利ですよね。ふわっとしたり、ぼよんとしたり、横からスライドインしたり、多くのアニメーションが用意されています。

もちろん私もよく使用しています。

Animate.cssは動きを付けたい要素にclassを追加するだけで簡単にアニメーション表示することができるように設計されたスタイルシートです。下記のページにて公開、配布されています。

Animate.cssは実装が簡単で、アニメーションの種類が豊富です。時間等はスタイルシートの一部書き換える（もしくは追加する）だけで好みの設定に変更することができるため、多くのウェブサイトで使用されています。

さて、そんな便利なAnimate.cssですが、内容はスタイルシートですので、単体で動的なアニメーションを実装することはできません。例えば、スクロールイベントやクリックイベントを取得してアニメーション表示したい場合などですね。CSSだけで難しい部分はスクリプトで動かしてあげる必要があります。

本記事ではAnimate.cssをもっと便利に使うために、jQueryを使ってスクロールに合わせてアニメーション表示する方法をご紹介したいと思います。

スクロールに合わせてアニメーション表示する

Animate.cssでアニメーションを表示するのに最低限必要なのは、Animate.cssのスタイルシートと、animatedとアニメーション名のclassを追加した要素です。例えば、bounceのアニメーションを表示する場合は下記のように記述します。

CSS

https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css

HTML

<div class="animated bounce"></div>

上記コードの場合、ページ読み込み時に一度だけアニメーションが表示されます。もし、同一のアニメーションを繰り返したい場合はinfiniteのclassを追加しましょう。

<div class="animated bounce infinite"></div>

これだけで素敵なアニメーションが表示されますが、もっと便利にするために、HTMLを修正します。今回の目的はスクロールですが、クリックイベント等にも流用できます。（クリックイベントのアニメーション表示についてはこちらで解説していますので、よければご参照ください。）

HTMLにdata属性を追加して、dataの値にアニメーション名を指定します。

<div class="animated" data-animate="bounce">bounce</div>

もし、fadeInを指定したい場合は、bounceをfadeInに書き換えます。

最後にスクリプトです。

スクリプトはjQueryを使用します。スクリプトの処理については記載のコメントをご確認いただければと思います。

JS

$(window).on('load scroll', function(){

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

});

上記をすべて記述すると下記のような処理になります。スクロールして動きをご確認ください。

See the Pen Scroll Animate.css by ryoy (@intotheprogram) on CodePen.

上記はスクロールに合わせて一度だけ実行される処理になります。もし、再度実行したい場合は、ウィンドウ内から外れた際にanimatedのclassを削除してあげます。

$(window).on('load scroll', function(){

  var elem = $('.animated');

  elem.each(function () {

    var isAnimate = $(this).data('animate');
    var elemOffset = $(this).offset().top;
    var scrollPos = $(window).scrollTop();
    var wh = $(window).height();

    if(scrollPos > elemOffset - wh + (wh / 2)){
      $(this).addClass(isAnimate);
    }else{
      $(this).removeClass(isAnimate);
    }
  });

});

こうすることで、一度アニメーションが表示された後でも、上に戻って再度下にスクロールした際にアニメーションが表示されます。

See the Pen bxvpEp by ryoy (@intotheprogram) on CodePen.

まとめ

本記事で紹介した内容をまとめてご紹介いたします。下記を使用することでAnimate.cssをスクロールに合わせてアニメーション表示することができます。環境に合わせてご活用ください。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
  </head>
  <body>

    <div class="animated" data-animate="bounce">Bounce</div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(window).on('load scroll', function(){

      var elem = $('.animated');

      elem.each(function () {

        var isAnimate = $(this).data('animate');
        var elemOffset = $(this).offset().top;
        var scrollPos = $(window).scrollTop();
        var wh = $(window).height();

        if(scrollPos > elemOffset - wh + (wh / 2)){
          $(this).addClass(isAnimate);
        }else{
          $(this).removeClass(isAnimate);
        }
      });

    });
    </script>
  </body>
</html>

Animate.cssは色々なアニメーションを簡単に追加することができる便利なスタイルシートです。少しスクリプトを追加するだけで表現の幅が広がります。これを機に一つ表現方法を習得していただければ幸いです。

以上、Animate.cssでスクロールに合わせてアニメーション表示する方法のご紹介でした！