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