今までスクロールアニメーションにwow.jsを使用していましたが、公開から年月が経っているのでAOS.jsに入れ替える事にしました。WordPressのブロックエディタで使用するにはプラグインが手頃ですが、使わない方向で頑張ってみました。
なぜwowではダメなのか？
PageSpeed Insightsで提案されました。
「ポリフィルと変換を使用すると、従来のブラウザで新しい JavaScript 機能を使用できるようになります。ただし、その機能の多くは最新ブラウザでは必要ありません。バンドルされた JavaScript の場合、モジュールあり / モジュールなしの機能検出を使用する最新スクリプトの導入戦略を採用することにより、従来のブラウザに対するサポートを維持しながら、最新ブラウザに送るコード量を減らすことができます。」
wow.jsを指している事が分かりました。
また、wowと一緒に使用していたAnimistaは、「合成されていないアニメーションは使用しないでください」と言われました。潮時なのかも。
WordPressでAOS.jsを使う
htmlに追記して使用します。ブロックエディターではちょっと問題です。
<div data-aos="fade-up">・・・</div>
<p data-aos="fade-up" data-aos-delay="500" data-aos-duration="1000">・・・</p>ブロックエディターで簡単設定
ブロックエディタで使用したいので、「高度な設定」→「追加CSSクラス」に記入出来る様しました。
準備
if ( is_front_page() ) を使い、TOPページだけ、アニメーションを付けました。
function.phpにcdnへリンク
function add_files() {
if ( is_front_page() ) {
wp_enqueue_style('aos-style', 'https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css');
wp_enqueue_script('aos-script', 'https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js', array(), null, true);
}
}
add_action('wp_enqueue_scripts', 'add_files');aos-fade delay-300 duration-800 を書いた場合、変換される様にします。
- “aos-” で始まるクラスを、data-aosに変換
- “delay-” で始まるクラスを、data-aos-delayに変換
- “duration-” で始まるクラスを、data-aos-durationに変換
function init_aos_footer_script() {
if ( is_front_page() ) {
echo '
<script>
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll("[class*=\\"aos-\\"]").forEach(function (el) {
el.classList.forEach(function (cls) {
if (cls.startsWith("aos-") && !el.hasAttribute("data-aos")) {
el.setAttribute("data-aos", cls.replace("aos-", ""));
}
if (cls.startsWith("delay-") && !el.hasAttribute("data-aos-delay")) {
el.setAttribute("data-aos-delay", cls.replace("delay-", ""));
}
if (cls.startsWith("duration-") && !el.hasAttribute("data-aos-duration")) {
el.setAttribute("data-aos-duration", cls.replace("duration-", ""));
}
});
});
AOS.init();
});
</script>
';
}
}
add_action('wp_footer', 'init_aos_footer_script');使い方
「高度な設定」→「追加CSSクラス」に追記。数字は大きい程ゆっくりになります。300は0.3秒
aos-fade delay-300 duration-800fadeやzoomなど、いろいろなパラメータがあります。詳しくはリストをご確認下さい。
今のところ問題なさそうです。間違えていたらごめんなさい。自己責任でお使い下さい。プラグインの更新など面倒な作業をしなくて良いので良かったです。
コメント ※ハンドルネームでお願いします