wow.jsをWordPressでも簡単に設定するカスタマイズ方法

簡単にアニメーションを実装できる便利なライブラリ「wow.js」

WordPressでもさくっと追加できちゃうのでよく使わせてもらっております。ただ、Gutenbergを使う時はちょっと困った事が起こります。

wow.jsは、data-属性で「duration（スピード）」や「delay（遅延）」を個別に設定することができるのですが、Gutenbergではそれが容易に設定できません。

たとえば、横に並んだブロックを遅延しながらフェードインしたいとかですね。今回はそちらに対応する方法をご紹介したいと思います。

プラグインで対応する方法

一応、data属性が追加できるプラグインはないか？と探してみはみたものの、いまひとつ。

wow.js以外のWordPressプラグインに「animation.it」などもありますが、wow.jsの方が個人的に使いやすいので今回はパス。

やはり、独自でJavaScriptでカスタマイズするのがてっとり早そうと判断しました。

JavaScriptソース

ソースがこちら↓JavaScriptファイルの適当なところに追加してください。

jQueryとwow.jsを先に読み込んで置く必要があります。

   /**
    * ＊nana.hp scripts＊
    * wow.js class→data変換
    * wow-delay-0.1s → data-wow-delay="0.1s"
    * wow-duration-0.1s → data-wow-duration="0.1s"
    */
   $("[class*='wow-']").each(function (i){

        const attrs = ["delay", "duration"];
        
        let obj = $(this);
        let classAttr = obj.attr("class");
        let classAttrs = classAttr.split(" ");
        let check = 0;
        for( let i=0; i<classAttrs.length; i++) {
            let classValue = classAttrs[i];
            for( let j=0; j<attrs.length; j++) {
                let wowKey = "wow-" + attrs[j];
                if(classValue.indexOf(wowKey + "-") >= 0) {
                    let wowValue = classValue.replace(wowKey + "-", "");
                    obj.attr("data-" + wowKey, wowValue);
                    check++;
                }
            }
            if (check == attrs.length) break;
        }
    });

WordPressの管理画面の設定

アニメーションしたいブロックの「class」に以下を入れます。（「高度な設定」ー「追加 CSS クラス」）

wow fadeInUp wow-delay-0.5s wow-duration-0.5s

「wow fadeInUp」はwow.jsの標準仕様ですね。その後ろが今回独自に追加するクラスになります。

ソースの解説

画面が読み込まれると、wow-●●●がセットされているタグを探して、みつかったらclassを解析して、「wow-delay-0.5s」などが設定されていれば、そのタグにdata属性「data-delay-●●●」を追加する仕様になっています。

ちなみに、上のサンプルは「delay」と「duration」だけが対象になっていますが、他の設定を追加したい場合は、以下のように２行目の配列に追加したいパラメーターを設定してあげてください。

const attrs = ["delay", "duration", "offset", 'iteration'];

参考にしていただければ幸いです。