[WordPress] でAOS.js スクロールアニメーション(プラグインなし)

<div data-aos="fade-up">・・・</div>
<p data-aos="fade-up" data-aos-delay="500"  data-aos-duration="1000">・・・</p>

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');

function init_aos_footer_script() {   
    echo '
    <script>
    (function() {
        document.addEventListener("DOMContentLoaded", function () {
            document.documentElement.classList.replace("no-js", "js");
            document.querySelectorAll("[class*=\"aos-\"], [class*=\"delay-\"], [class*=\"duration-\"]").forEach(function (el) {
                el.classList.forEach(function (cls) {
                    if (cls.startsWith("aos-") && !el.hasAttribute("data-aos")) {
                        el.setAttribute("data-aos", cls.substring(4)); 
                    } else if (cls.startsWith("delay-") && !el.hasAttribute("data-aos-delay")) {
                        el.setAttribute("data-aos-delay", cls.substring(6));
                    } else if (cls.startsWith("duration-") && !el.hasAttribute("data-aos-duration")) {
                        el.setAttribute("data-aos-duration", cls.substring(9));
                    } else if (cls.startsWith("anchor-") && !el.hasAttribute("data-aos-anchor-placement")) {
                        el.setAttribute("data-aos-anchor-placement", cls.substring(7));
                    } else if (cls.startsWith("ease-") && !el.hasAttribute("data-aos-easing")) {
                        el.setAttribute("data-aos-easing", cls);
                    }
                });
            });

            // ページ全体の画像なども読み込み終わったらAOSを初期化（カクつき・ズレ防止）
            window.addEventListener("load", function() {
                if (typeof AOS !== "undefined") {
                    AOS.init({
                        once: true,
                        offset: 80,
                        duration: 800,
                        easing: "ease-out",
                        mirror: false,
                        anchorPlacement: "top-bottom",
                    });
                }
                // CLS防止フラグを解除（これでフワッと表示）
                document.documentElement.classList.add("aos-ready");
            });
        });
    })();
    </script>
    ';
}
add_action('wp_footer', 'init_aos_footer_script', 20);

// フラッシュ防止用の最小限のCSS
function add_aos_critical_css() {
    echo '<style>html:not(.aos-ready) [data-aos], html:not(.aos-ready) [class*="aos-"] { opacity: 0 !important; visibility: hidden !important; }</style>';
}
add_action('wp_head', 'add_aos_critical_css', 1);

[data-aos],
.aos-fade-up,
.aos-fade-down,
.aos-fade-right,
.aos-fade-left,
[class*="delay-"],
[class*="duration-"] {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition-property: transform, opacity, visibility !important;
  transition-duration: 0.8s !important; /* 基本の速度 */
  transition-timing-function: ease-out !important;
}

/* AOSが発火した時の表示設定（元の位置に滑らかに戻す） */
[data-aos].aos-animate,
.aos-fade-up.aos-animate,
.aos-fade-down.aos-animate,
.aos-fade-right.aos-animate,
.aos-fade-left.aos-animate,
[class*="delay-"].aos-animate,
[class*="duration-"].aos-animate {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(0, 0) !important;
}

/* ==========================================
   fade系4種限定：読み込み完了前の「初期位置」
   ========================================== */
html:not(.aos-ready) [data-aos="fade-up"],
html:not(.aos-ready) .aos-fade-up       { transform: translateY(15px); }

html:not(.aos-ready) [data-aos="fade-down"],
html:not(.aos-ready) .aos-fade-down     { transform: translateY(-15px); }

html:not(.aos-ready) [data-aos="fade-right"],
html:not(.aos-ready) .aos-fade-right    { transform: translateX(-40px); }

html:not(.aos-ready) [data-aos="fade-left"],
html:not(.aos-ready) .aos-fade-left     { transform: translateX(40px); }



/* その他微調整 */
.wp-block-image[data-aos] img,
.wp-block-image[class^="aos-fade-"] img,
.ark-block-section__img {
  display: block;
}

/* モバイル最適化（スマホのときは少し早めに動かす） */
@media (max-width: 768px) {
  [data-aos],
  .aos-fade-up,
  .aos-fade-down,
  .aos-fade-right,
  .aos-fade-left,
  [class*="delay-"],
  [class*="duration-"] {
    transition-duration: 0.6s !important;
  }
}

aos-fade-up delay-300 duration-800