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

Pocket
LINEで送る

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

Animate.css

まずはアニメーション用の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


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

使い方


上記サイトの/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">wow fadeInUp</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">wow fadeInUp</div>

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

Pocket
LINEで送る

back to top