プログラミング

2022.04.27

多種・多様なスクロールアニメーションを実装するならAnimate.css！使い方を解説

多種・多様なアニメーションを簡単に実装できるライブラリを探してる。

スクロールしたらアニメーションが実行されるようにしたい。

本記事ではAnimate.css・jQueryを使ってこのような悩みを解決！使い方を解説します。

実装サンプル

See the Pen
animation.css by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

Animate.cssとjQueryで多種多様なアニメーションがスクロールしたら実行されてます。

実装手順は以下の通りです。

Animate.cssをhead内に読み込もう

  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />

head内に上記CDNを読み込むだけでAnimate.cssが使えるようになります。

本記事ではjQueryも使います。同時にCDN等で読み込みましょう。

実装したいアニメーションを選ぶ

以下、animate.cssへアクセス。実装したいアニメーションを右サイドバーから選びましょう。

https://animate.style/

アニメーション名をクリックすると実際に動きが確認できます。

アニメーションクラスを付与

<p class="animate__animated animate__実装したいアニメーション名">animation</p>

実装したいアニメーションを選んだら、実行したいhtml要素のクラスに以下を付与します。

animate__animated animate__実装したいアニメーション名

【実装したいアニメーション名】には前章で選んだアニメーション名を入れます。

例：fadeInUpを実装したい場合。

animate__animated animate__fadeInUp

とクラスを付与する。

以上でアニメーションを実装できます。

スクロールしたらアニメーションを実行

$(function () {
  $(window).scroll(function () {
    $("アニメーションさせたい要素").each(function () {
      var imgPos = $(this).offset().top;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > imgPos - windowHeight) {
        $(this).addClass("animate__animated animate__fadeInUp"); //アニメーションクラス名が付与
      } else {
        $(this).removeClass("animate__animated animate__fadeInUp"); //アニメーションクラスを削除
      }
    });
  });
});

スクロールしたらアニメーションを実行するjQueryコードです。

スクリプト内に記述します。

セレクタにアニメーションさせたいhtml要素のクラス・IDを指定します。

addClassメソッド、removeClassメソッド内に実行したいanimate.cssのアニメーションクラスを入れます。

以上で任意の要素位置まできたらアニメーションが実行されるようになります。

まとめ

アニメーションを一から考えCSSを書くのが面倒。

そんな方にAnimate.cssは最適です。

おおよそのシンプルな動きはAnimate.cssを使えば解決できます。

ぜひ参考にしてみてください。

以上で解説を終わります。