wow.jsのアニメーションをカスタマイズする

2021-12-30

wow.jsは、スクロールアニメーションが実装できるJavaScriptのプラグインです。

このプラグインは、animate.cssを使うことが条件となっています。今回、animate.cssの内容を編集することで、自分好みのアニメーションにできましたので、記事にします。

設定方法

wow.jsの設定は簡単です。GitHubからダウンロードして、 wow.jsとanimate.cssを設定します。

<link rel="stylesheet" href="./animate.css">
<script src="./wow.min.js"></script>

その後、wow.jsを実行させればOKです。

new WOW().init();

少し端折った説明なので、わからなければコチラのサイトをご覧ください。使い方の詳細が載っています。

今回はここからの話になります。

アニメーションはカスタマイズできます

アニメーションが「ちょっと自分の好みと違うなー」と思うときは、変更することができます。

animate.cssの中身を見ると、アニメーションが書いてあるだけの単純なコードでした。なので、アニメーションの数値を変えて、自分好みの動きへカスタマイズしましょう。

例を1つ挙げます。fadeInLeftBigの動きです。

まずは実装させてみましょう。htmlファイルにwowとfadeInLeftBigのクラスを追加すれば、fadeInLeftBigのアニメーションが表示されます。

<div class="block01 wow fadeInLeftBig">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>

animate.cssは下記のコードが記載されています。なお重複になるので、-webkit-keyframesは省略しています。

@keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}

.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
}

fadeInLeftBigのアニメーションは、-2000pxの位置から0に動きます。
個人的には動き過ぎに感じるので、少しだけ動くように変更します。
translateXの数値を変更し、自分の好みの動きになるように設定します。

@keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(-500px);
-ms-transform: translateX(-500px);
transform: translateX(-500px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}

変更した後のアニメーションです。

ちなみにanimate.cssを編集すると、下記の問題が起きます。その点はご注意ください。

animate.cssを編集した後に、このファイルを再インストールした場合は、初期状態に戻ります。
他のプラグインでanimate.cssを使用している場合は、そちらもアニメーションが変更されます。

animate.cssを使わなくてもアニメーションできます

よく考えたら、animate.cssを使わなくてもアニメーションできます。style.cssなど、自分のcssに書けば実装できます。

下記のサンプルは、先ほど編集したfadeInLeftBigを複製し、animation01クラスとしてcssを書きました。結果は、問題無くアニメーションできました。

<div class="block01 wow animation01">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>

@keyframes animation01 {
0% {
opacity: 0;
-webkit-transform: translateX(-500px);
-ms-transform: translateX(-500px);
transform: translateX(-500px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}

.animation01 {
animation-name: animation01;
}

まとめ

animate.cssの内容を編集して、自分好みのアニメーションにすることが可能です。また、animate.cssを使わずに自分でCSSを書いても動作します。

恐らくほどんどの方は、数種類のアニメーションしか使わないと思います。私の場合は、右から表示、左から表示、下から表示の3つしか使いません。

だったら、3種類のアニメーションを自分好みの動きに調整するのもアリです。それをSassやCSSで作っておいて、プロジェクトで使いまわすことも可能です。

wow.jsにひと手間加えて、アニメーションの質を高めるのはいかがでしょうか？