WordPress│ブロックにふわっとフェードインアニメーションを追加する方法

.fadein {
	opacity: 0;
	transform: translateY(30px);
	transition-property: transform, opacity;
	transition-duration: 1.5s;
	transition-delay: 0s;
}

.fadein.is-active {
	opacity: 1;
	transform: translateY(0);
}

add_action( 'wp_footer', function () { ?>
<script>
document.addEventListener("DOMContentLoaded", function () {
  const fadeInElements = document.querySelectorAll(".fadein");
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("is-active");
          observer.unobserve(entry.target);
        }
      });
    },
    {
      threshold: 0.2,
    }
  );

  fadeInElements.forEach((element) => {
    observer.observe(element);
  });
});

</script>
<?php } );

add_action('wp_footer', function () { ?>
<script>
    /**
     * フェードインアニメーションを初期化する関数
     */
    function initializeFadeIn() {
        const fadeInElements = document.querySelectorAll(".fadein");
        if (!fadeInElements.length) return;

        fadeInElements.forEach((element) => {
            // CSSを直接適用
            element.style.opacity = 0;
            element.style.transform = "translateY(30px)";
            element.style.transition = "opacity 1.5s, transform 1.5s";
        });

        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = 1;
                    entry.target.style.transform = "translateY(0)";
                    observer.unobserve(entry.target); // 監視を停止
                }
            });
        });

        fadeInElements.forEach((element) => observer.observe(element));
    }

    // 初回ロード時に初期化
    document.addEventListener("DOMContentLoaded", () => {
        initializeFadeIn();
    });
</script>
<?php });