Animate.cssとWOW.jsを使って、簡単にスクロールエフェクトを実装してみる

Update:

コーディング時に依頼されることが多いスクロールエフェクト。
確かに、画面をスクロールしたさいに要素がふわっふわっと表示されると、ちょっと素敵な感じしますね。
アニメーションの動きを当てるAnimate.css、スクロールでトリガーを発動させるwow.js（なんとjQuery不要）を使うと簡単に実装できます。もちろんIE11対応！
そのメモ。

Animate.css

まずはアニメーション用のcssを用意します。

Animate.css

エフェクトをつけたい要素にclassを追加するだけで、簡単にCSSアニメーションが実装されます。
そのまま使うと動きが派手過ぎたりするので、必要に応じて調整します（※後述）。

使い方

上記サイトからamimate.cssをダウンロード＆適所に格納＆headにリンク記述。

WordPress内で使用する場合は、Animate.cssとWOW.jsがセットになったプラグインがあるので、それを使ってもいいかと思います（ちょっと古いのが気になりますが…）。このサイトではfunctopns.phpで参照タグを追記させています。

要素にclassを追加します。エフェクトの種類は上記公式サイトで各classごとの動きが確認できます。

.animatedとエフェクトのclassとループさせたい場合の.infinite

試しにbounceをループでかけてみます。
エフェクトをかけたい要素にclass="animated bounce infinite"を付けます。

さすがにループだとしつこいですね。
.infiniteを付けなければ、1回（あるいはclassで回数を指定）で動作は終わります。

wow.js

wow.js — Reveal Animations When Scrolling
wow.js is a JavaScript plugin that reveals animations when you scroll. Very Animate.css Friend.

ぶっ飛んだ公式サイト😅
先ほどの例ではその場でのエフェクトでしたが、スクロールに応じてエフェクトが発生するトリガーを実装するためのJavaScript、wow.jsを利用します。

使い方

matthieua/WOW
Reveal CSS animation as you scroll down a page. Contribute to matthieua/WOW development by creating an account on GitHub.

上記サイトの/disr/からwow.jsをダウンロード＆適所に格納＆リンク記述。
要素にclassを追加します。animate.css単体のときと異なり、セットで使う場合はanimateではなくwowを使用します。
なので、エフェクトを付けたい要素にclass="wow bounce"を付加することになります。

wow.jsへの参照リンクを貼り、それとは別に下記の実行用のscriptを</body>の直前に記述します。

静的ページの場合

<script>
  new WOW().init();
</script>

WordPressの場合

WordPress内で実装する場合は、簡単にfooter.php内の</body>の直前に追記するか、あるいはfunction.phpに以下を追記します。

//footerにタグを追加
add_action( 'wp_footer', 'add_meta_to_footer' );
function add_meta_to_footer() {
  echo '
    <script>
      new WOW().init();
    </script>
  ';
}

と記載すると、</body>の直前に追加されます。

.wowとエフェクトのclass一例

画面に要素が入るとエフェクトが発動するので、
ゆっくりとスクロールさせてください。

カスタマイズ

Animate.cssの動きの調整

結構簡単に実装できますが、だいぶ動きが大きいです。例えば、ブログの記事カードがほわっほわっと表示させたい場合など、ちょっとダイナミック過ぎます。
animate.cssを開いて記述を見てもらうと分かりますが、各classの動きをkeyframeで設定したものになります。要はその設定の数値を調整すればいいのですが、animate.cssを直に変更しちゃうのは避けたいので、調整したclassの箇所をコピーして分かりやすいclass名に変更し、それを調整します。

例えば、fadeInUp

ダイナミックですね。
animate.cssの該当箇所を選んでコピー。

直後にペーストして、ここではfadeInUpSmallというclass名に、100%となっている数値を60%等に変更します。

数値の変更箇所は、class(動き）によって異なります。animate.cssを触りたくない人は、編集用のcssに記述してください。

さっきのfadeInUp
新たに作ったfadeInUpSmall

ちょっと分かりずらいのですが、動きが小さくなりました。

Animate.cssに調整用のclassがあったのでまとめ

Animate.cssの後ろの方に、調整用のclassが何種かあることに今更ながら気付きました。なんという気配りでしょう！（wow.jsにも同様のオプションがありますので、好みの方を使ってください）
wow.jsとセットで使っている場合は、.animatedではなく.wowを使用していたので、再び.animatedを付加する必要があります。

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}
.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}
.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}
.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

fadeInUpで色々試してみます。
画面に要素が入るとエフェクトが発動するので、
ゆっくりとスクロールさせてください。

.animated.infinite

リピートです。

.animated.delay-1s

アニメーションの開始を1秒遅らせます。

.animated.delay-2s

アニメーションの開始を2秒遅らせます。

.animated.delay-3s

アニメーションの開始を3秒遅らせます。

.animated.delay-4s

アニメーションの開始を4秒遅らせます。

.animated.delay-5s

アニメーションの開始を5秒遅らせます。

.animated.fast

アニメーション一回分の時間の長さを0.8秒にします（animate.cssのデフォルトのは1秒）。

.animated.faster

アニメーション一回分の時間の長さを0.5秒にします。素早い。

.animated.slow

アニメーション一回分の時間の長さを2秒にします。

.animated.slower

アニメーション一回分の時間の長さを3秒にします。ゆっくり。

.animated.faster.delay-3s

合わせ技の例です。アニメーションの開始を3秒遅らせ、アニメーション一回分の時間の長さを0.5秒にします。じんわりシュッ。

wow.jsの調整用オプションまとめ

長々とanimete.cssの調整用classについてまとめましたが、wow.jsでも調整できるオプションがあります。こっちの方が話が早いですね。。

data-wow-duration アニメーションの継続時間を変更する
data-wow-delay アニメーションを開始するまでの遅延時間
data-wow-offset アニメーションを開始する距離（ブラウザの下部に関係します）
data-wow-iteration アニメーションのリピート回数

rubberBandで試してみます。これがデフォルトの動きです。

2秒遅延して3秒かけてじんわりアニメーション

.rubberBandで試してみます。
data-wow-duration="3s" data-wow-delay="2s"を付け加えます。

<div class="alert alert-default wow rubberBand mt-3" data-wow-duration="3s" data-wow-delay="2s" role="alert"></div>
ブラウザ下部まで100来たところでアニメーションを開始し、5回繰り返す

data-wow-offset="100" data-wow-iteration="5"を付け加えます。

<div class="alert alert-default wow rubberBand mt-3" data-wow-offset="100" data-wow-iteration="5" role="alert"></div>

モバイルではアニメーションを実行させないなど、カスタマイズ用の記述もあるんですが、それに関しては公式の「HOW TO USE?」を参照してください（ページの一番下の部分です）。

wow.js — Documentation
wow.js is a JavaScript plugin that reveals animations when you scroll. Very Animate.css Friend.

おまけ実験室

wobble編

やっかましいwobble！（やかましすぎて酔うのでslowerを付加しています） 絶対使うことは無いなと思ってましたが、

カスタマイズでオリジナルclassを作り動きを調整してみました。うーん、どこかで使えるかな？

hoverでアニメーションさせたい

ここではhoverでイベント発生してほしいので、animate.cssのみの使用となります。
jQueryでhover時にclassを付加させてみます。
mouseoverでaddClass、mouseoutでremoveClassですね。

 <script>
  $('.hover-test').hover( 
    function(){$(this).addClass('pulse');}, 
    function(){$(this).removeClass('pulse');}
  );
</script>

hover-testというclassにhoverでアニメーションの動きを指定するclasspulseを付加します。animatedは元から付加されています。

<div class="hover-test alert alert-default animated mt-3"></div>

リンクを設定してないとはいえ、hoverエフェクトがあるのにカーソルが矢印のままなのは気になります。インラインですがcursor: pointer;を指定してみます。

関連記事: