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

かっこいいアニメーションをサクッと実装したい！

そんな時は、Javascriptのライブラリwow.jsがオススメです。

僕はWEB制作の仕事をしており、かなりの頻度でwow.jsを使ってアニメーションを実装しています。

wowを使わない方法でも実装可能な場合もあると思いますが、とにかく便利で使いやすいため、お世話になっています。

例えば、次のようにふわっと浮かび上がる動作を実装できます。

(ページ再読み込みでもう一度見れます)

以前、次のようなツイートをしました。

アニメーションをスクロールで発火させる場合はwow.jsが便利。わりと簡単に実装できます。これぞ天の恵みですね😇https://t.co/j0qDN2ZdQf
wowのカスタマイズは付属のanimate.cssを修正するけど、ググってもあまり情報が出てこなかったような。。カスタマイズできれば動作の幅がぐんと広がりますね。

— Takeru | WEB Development (@mikey_an0101) March 23, 2020

wowユーザーの僕の正直な感想はこちらです。

・wowは便利だけど、デフォルトだと少し物足りないこともある。

・カスタマイズ方法についての情報があまりない。

この辺りを深掘りしつつ、カスタマイズ方法を紹介したいと思います。

なお、本記事は2部構成になっており、前半ではwowのことを知らない方のためにサクッと解説しています。

「wowのカスタマイズのことだけ詳しく知りたい」という方は、前半を飛ばして後半をお読みください。

wow.jsって何？(前半)

「WEBサイトに動きをつけるための様々なアニメーションが入ったJavascriptライブラリ」です。

ライブラリの実装って難しいの？

簡単です。

有名なライブラリなので、実装方法の紹介記事はたくさんあります。

本家サイトでかなり詳しく説明されているので参照ください（英語ですが。。）

https://wowjs.uk/docs

参考までに、実装方法を簡単に説明しておきます。

ステップ１：ライブラリをダウンロード

公式のGithubからダウンロードします。

https://github.com/graingert/wow

ステップ２：必要なファイルを自分のフォルダに置く

ダウンロードしたファイルのうち、必要なファイルは次の2つだけで基本OKです。

・animate.css

・wow.min.js

ステップ３：ファイルを読み込ませる

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

ステップ４：Javascriptコードを記載

html内に次のコードを記載します。

 <script>
  jQuery(function($){
   new WOW().init();
  });
 </script>

ステップ５：htmlコードを記載

追加したいアニメーションを指定します。

wow.jsの特有の書き方なのですが、対象要素のhtmlコードに対して、使いたいアニメーションを直接指定します。

例えば、要素が下方からふわっと現れる動作を実装したい場合は、以下のように指定します。

<div class="wow fadeInUp">
 対象の要素
</div>

アニメーションを適用したい要素を、所定のコードで囲むイメージですね。

スクロールするとアニメーションが発動します。

完成。

これだけで動きます。

Javascriptの知識がなくてもOKです。

簡単ですね。

wow.jsのカスタマイズ(後半)

公式ページにも、次のカスタマイズが記載されています。

data-wow-duration

data-wow-delay

data-wow-offset

data-wow-iteration

例えば、次のように書きます

<div class="wow fadeInUp" data-wow-duration="8s" data-wow-delay="3s" data-wow-offset="10">
 対象の要素
</div>

すると、こう動きます（3秒後に出現して、ゆっくり浮かび上がります）。

はい、ここまでが公式ページに記載されている情報です。

ですから情報はたくさんあります。

しかし、wow.jsを使っているうちに、だんだんとデフォルト動作では物足りなくってきます。

WEB制作の仕事をしている方であれば、クライアントから「動作をもう少し大きくしてほしい」などのリクエストもあり、それに対応していく必要がありますね。

例えば、fadeInUpのふわっと浮かび上がる動作の「上がり幅」を大きくしたい場合、どうすれば良いでしょうか？

この場合、animate.cssファイルのコードを書き換えます。

以下、カスタマイズする具体的な手順をfadeInUpを例にして見ていきましょう。

animate.css内でfadeInUpと検索すると、以下のようなコードが見つかります。

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

この中で、上昇幅を指定しているのは”translateY(20px)”の部分です。

そこで、”translateY(20px)”を、例えば”translate3d(0, 40%, 0)”と書き換えてみます。

書き換え後のコードは以下のようになります。

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 40%, 0);
    transform: translate3d(0, 40%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 40%, 0);
    -ms-transform: translate3d(0, 40%, 0);
    transform: translate3d(0, 40%, 0);

  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

少し補足説明をすると、0%が動作開始の初期位置、100%は動作完了後の位置を示しています。

コードがたくさん並んでいて複雑そうに見えますが、複数ブラウザで対応するように書いているだけなので心配しなくてもOKです。

上記の例だと、「要素の高さの40%下方の位置からスタートして、定位置（0）までY軸方向に移動する」と言うことですね。

初期位置を調整することで、上がり幅を調整することができます。

なお、transform: translate3d(x, y, z)を用いると、x軸、y軸、z軸の３方向の位置調整が可能ですよ！

以上、wow.jsの少し踏み込んだカスタマイズ方法の解説でした。

この情報がお役に立てれば幸いです。 ＼(^__^)／