（改訂）スクロールに合わせて要素にアニメーション（WordPress版）

以前、jQueryプラグインScrolla.jsを使って、スクロールに合わせてanimate.cssを発火させる方法についての記事を書きましたが、チャットちゃん（GPT）曰く、その方法はすでに古く、今ではIntersectionObserverを使った方法が主流とのことでしたので、そちらをご紹介します。

1.animate.cssのアップロードと読み込み

ここは前回と同じです。animate.cssをダウンロードして読み込みます。
こちら↓のGitHubから「animate.css」（もしくはanimate.css.min）をダウンロードして、FTPアップローダーなどを使ってテーマフォルダ内直下にアップロードします。

open_in_new https://github.com/animate-css/animate.css

アップロードしたCSSを読み込みます。以下のコードを<head>内に追記します。

<link
    rel="stylesheet"
    href="<?php echo get_template_directory_uri(); ?>/animate.css"
    type="text/css"
  />

CDNを使う場合は、以下のコードを<head>内に追記します。

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />

2.HTMLで指定

使い方はScrollaの仕様に合わせています。
まず「animate」というclassを付与し、「data-animate」をはじめとする必要なデータ属性を指定します。

<div class="animate"
data-animate="fadeInUp"
data-delay="0.3s"
data-duration="1s"
data-iteration="1">
テキスト
</div>

対応しているデータ属性は以下の通り
※scrollaにあった「data-offset」は未対応。

data-animate 適用したいanimate.cssのセレクタ。
open_in_new こちらのサイトで設定されているセレクタから「animate__」を抜いて指定（※）
data-duration アニメーションの長さ（animation-duration）。1秒なら1s
data-delay 読み込まれてからアニメーションが開始されるまでの長さ（animation-delay）。1秒なら1s
data-iteration アニメーションを繰り返す回数（animation-iteration-count）。
infiniteを設定すると無限にループ。

3.JSを追記

フッターなどに以下を追記します。

<script>
document.addEventListener("DOMContentLoaded", () => {

  const io = new IntersectionObserver((entries)=>{
    entries.forEach(entry=>{
      if(!entry.isIntersecting) return;

      const el = entry.target;
      const anim = el.dataset.animate;

      if(el.dataset.delay) el.style.animationDelay = el.dataset.delay;
      if(el.dataset.duration) el.style.animationDuration = el.dataset.duration;
      if(el.dataset.iteration) el.style.animationIterationCount = el.dataset.iteration;

      el.classList.add("animate__animated","animate__"+anim);

      io.unobserve(el);
    });

  },{threshold:0.15});

  document.querySelectorAll(".animate").forEach(el=>io.observe(el));

});
</script>

以上で完成です！