【Animate.css + wow.js 総まとめ】スクロール連動やWordPressでの設定方法

どうも、たっくん(@wakutakublog)です。

以下のどちらかに当てはまる方は、今回の記事が役に立つはずです↓

  • サイトにアニメーションを簡単につけたい
  • WordPress(Gutenberg)でもwow.jsのdata属性を追加したい

このようにお悩みのWEB制作者に「Animate.css + wow.jsの総まとめ」を解説していきます。

ここで紹介する方法をマネしたり、コードをコピペするだけで全て解決するかと。

たっくんのアイコン画像たっくん

いつでもコピペできるよう、ブックマーク推奨…!

目次

サイトに簡単にアニメーションを付ける方法【Animate.css + wow.js】

簡単にアニメーションを付けたい場合は「Animate.css」と「wow.js」を使用すればOKです。

この2つのライブラリは超簡単に使えるので、ぜひ使い方を知っておきましょう。

たっくんのアイコン画像たっくん

1つ注意点があるので、そこも紹介しますね…!

Animate.cssの使い方【簡単にアニメーションが実現】

animate.css

まずは「Animate.css」を導入しましょう。

公式ページに書かれている通り、headタグ内でCDNを読み込めばOK↓

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

Animate.cssを読み込めたら、クラスを追加するだけでアニメーションが機能します。

<h2 class="animate__animated animate__fadeIn">フェードインするタイトル</h2>

「animate__animated」と「animate__fadeIn」という2つのクラスを付けていますが、これも単純です↓

  • 「animate__animated」は必須
  • 「animate__〇〇」は公式サイトから使いたいアニメーションのクラス名をコピーすればOK(下の画像参照)
animate.cssのコピーボタン
たっくんのアイコン画像たっくん

アニメーションの確認はコピーボタン横の文字をクリックするだけ…!

wow.jsの使い方【スクロールに連動させる】

「Animate.css」だけでアニメーションを付けられたのですが、これだけではページを読み込んだタイミングで発動してしまいます。

サイトのアニメーションは「スクロールされ可視範囲に入ったら発動する」のが一般的です。

なので、スクロールに連動してアニメーションが機能するようにしていきましょう。

では早速「wow.js」の読み込みです。

wow.jsのGitHubからZIPでダウンロードします↓

wow.jsのgithub

ダウンロードしたZIPファイルを展開して「wow.min.js」を使用するフォルダに移動させましょう。(他のファイルは使いません)

wow.min.js

移動させたら、headタグ内 もしくは </body>直前で読み込みます↓(パスは自分のフォルダ構造にあわせて変更してください)

<script src="wow.min.js"></script>

その下に「wow.jsを有効化するための記述」も書いておきます。(コレがないと機能しません)

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

最後にアニメーションさせる要素に「wow」というクラスを付ければ完成です!

<h2 class="wow animate__animated animate__fadeIn">フェードインするタイトル</h2>
たっくんのアイコン画像たっくん

簡単ですねぇ…

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

ここまでで「アニメーション要素が可視範囲に入ったら動く」という設定ができました。

これでも十分使えますが、もう少しカスタマイズしてみましょう。

「wow.js」が用意してくれている4つのdata属性を使っていきます↓

  • data-wow-duration:アニメーションにかける時間を指定
    → 速くor ゆっくり動かすことが可能に
  • data-wow-delay:可視範囲にはいってから発動するまでの時間を指定
    → 横並びの要素を左から順に動かすことが可能に
  • data-wow-offset:可視範囲に入っても発動せず、さらに何pxスクロールされたら発動するかを指定
    → 画面の真ん中で動かしたりが可能に
  • data-wow-iteration:アニメーションの繰り返し回数を指定
    → 何度もアニメーションさせることが可能に

使い方はこちら↓

<h2 class="wow animate__animated animate__zoomIn" data-wow-duration="3s">ゆっくり3秒かけてアニメーション</h2>
<h2 class="wow animate__animated animate__zoomIn" data-wow-delay=".5s">可視範囲に入って0.5秒後にアニメーション開始</h2>
<h2 class="wow animate__animated animate__zoomIn" data-wow-offset="100">可視範囲からさらに100pxスクロールされたらアニメーション</h2>
<h2 class="wow animate__animated animate__zoomIn" data-wow-iteration="2">アニメーションを2回繰り返す</h2>
たっくんのアイコン画像たっくん

これで細かい設定もできるようになりましたね…!

Animate.css + wow.js を使用する際の注意点

初めにも書いた注意点について紹介しておきます。

ダウンロードしたwow.jsのフォルダを見ると「animate.css」が入っているんです。

animate.css

上で紹介したCDNではなく、これを読み込むことでもアニメーションを付けることができます。

その際のクラスは以下のように↓(animate__animatedは不要。animate__〇〇は〇〇のみ記述)

<h2 class="wow fadeIn">フェードインするタイトル</h2>

クラスが簡潔になって良いんですが、なぜか使えないアニメーションがあるんですよね。(zoomInとか使えなかった)

なので、基本的にはCDNで読み込む方がいいかと思います。

たっくんのアイコン画像たっくん

注意点:Animate.cssはCDNで読み込もう!

WordPress(Gutenberg)でもwow.jsを使う方法【data属性の追加】

前章で紹介した方法を使えば、WordPressでもアニメーションを付けることはできます。

「高度な設定 > 追加CSSクラス」からクラスを追加するだけなので。

ただ、細かいカスタマイズをするための「data属性」がGutenbergでは追加できません。

なので、これを設定できるようにするJSコードを書いていきましょう。

たっくんのアイコン画像たっくん

コピペしてOKです…!

Animate.cssとwow.jsを読み込む

まずは同様にファイルを読み込んでいきます。(ファイルの設置はFTPなりローカル環境なりで行ってください)

読み込み方法によってコードが変わるので、自分が使う方法のコードを参考にしてください↓(パスは自分のフォルダ構造にあわせて変更してください)

function wow_init() {
  wp_enqueue_style('animate', 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css');
  wp_enqueue_script('wow', get_template_directory_uri() . '/js/wow.min.js', array(), false, true);
  wp_enqueue_script('my-js', get_template_directory_uri() . '/js/my-js.js', array("jquery"), false, true);
}
add_action('wp_enqueue_scripts', 'wow_init');

3つ目の「my-js.js」では「wow.jsを有効化するための記述」をしておきましょう↓

jQuery(function ($) {
  new WOW().init();
});

クラスを追加する

「Animate.css」と「wow.js」が読み込めたので、クラスを追加すればアニメーションが機能します。

アニメーション要素を選択して、高度な設定 > 追加CSSクラス に記述していきましょう。

wow.jsのクラスを追加

必要なクラスは「wow」「animate__animated」「animate__〇〇」の3つですね!

wow.jsのカスタマイズを設定できるようにする【data属性の追加】

ここまでは問題なくできるのですが、問題はdata属性です。

Gutenbergにはdata属性を追加できる欄がありません。(カスタムHTMLならできますが)

なので「クラスに追加したら自動でdata属性に追加されるJS」を用意していきましょう。

今回の仕様は以下の通り↓

  • data-wow-duration:クラスに「data-wow-duration-◯s」と追加すればOK
  • data-wow-delay:クラスに「data-wow-delay-◯s」と追加すればOK
  • data-wow-offset:クラスに「wow-of-◯」と追加すればOK
  • data-wow-iteration:クラスに「data-wow-iteration-◯」と追加すればOK

また「data-wow-offset」については単純に◯pxではなく、画面の◯分の1といったように、デバイスに左右されないような設定にしています。

なので、「data-wow-offset」のみ別の記述をしています。

では早速「new WOW().init();」の下に追加していきましょう。

まずは「delay / duration / iteration」3つのための記述です↓

  // delay,duration,iterationの設定
  $("[class*='data-wow-']").each(function(){
    const dataArray = ["delay", "duration", "iteration"];
    let elem = $(this);
    let elemClass = elem.attr("class");
    let elemClasses = elemClass.split(" ");
    let count = 0;
    for(let i=0; i<elemClasses.length; i++){
      let className = elemClasses[i];
      for (let n = 0; n < dataArray.length; n++){
        let wowKey = "data-wow-" + dataArray[n];
        if(className.indexOf(wowKey + "-") != -1){
          let wowValue = className.replace(wowKey + "-", "");
          elem.attr(wowKey, wowValue);
          count++;
        }
      }
      if (count == dataArray.length) break;
    }
  });

参考記事:https://nanahp.com/blog/1142

次に「offset」のための記述です↓

// data-wow-offsetの設定
  var wh = $(window).height();
  $("[class*='wow-of-']").each(function(){
    let elem = $(this);
    let elemClass = elem.attr("class");
    let elemClasses = elemClass.split(" ");
    for (let i = 0; i < elemClasses.length; i++) {
      let className = elemClasses[i];
      if (className.indexOf("wow-of-") != -1) {
        let wowValue = className.replace("wow-of-", "");
        let offsetKey = wh / wowValue;
        elem.attr("data-wow-offset", offsetKey);
      }
    }
  });

これで追加したクラスが以下のように変換されるようになりました!↓

  • data-wow-duration-2s → data-wow-duration=”2s”
  • data-wow-delay-.5s → data-wow-delay=”0.5s”
  • wow-of-4 → data-wow-offset=”画面高さの1/4″
  • data-wow-iteration-4 → data-wow-iteration=”4″
たっくんのアイコン画像たっくん

あとは好きなようにクラスを追加するだけですね…!

「Animate.css + wow.js」は仕上げに便利なのでマスターしておこう

今回は「Animate.css + wow.jsの総まとめ」ということで基本的な使い方からWordPress(Gutenberg)での使い方まで徹底的に解説してきました。

このアニメーションはサイトの仕上げに便利です。

「完成したけど、ココはもう少し注目を集めたい」といった際にサクッとアニメーションが付けれたら楽ですよね。

クラスを追加するだけで動きをつけられるので、ぜひ使い方をマスターしておきましょう!

たっくんのアイコン画像たっくん

僕もちょくちょくお世話になっています

この記事が気に入ったら
いいね または フォローしてね!

目次
閉じる