スクロールし画面内に入ったブロックをアニメーション表示する方法

以下のコードをjavascript.jsに追加します。

/**
 * IntersectionObserverを使用して要素の画面内交差を監視し、
 * 画面内に入った際のアクティブクラス付与およびアニメーション終了時の画像差し替えを制御
 *
 * @param {string} targetSelector - 監視対象とする要素のCSSセレクタ
 * @param {string} activeClass - 要素が画面内に入った際に追加するアクティブクラス名
 * @param {string} stopImageSrc - アニメーション終了後に差し替える画像のURL
 * @param {IntersectionObserverInit} [options] - IntersectionObserverのオプション設定（省略可）
 */
const speechStop = (targetSelector, activeClass, stopImageSrc, options) => {
  // 監視対象となるすべての要素を取得
  const elms = document.querySelectorAll(targetSelector);

  // 要素の状態を監視
  const observer = new IntersectionObserver((entries) => {
    // 監視している要素を1つずつ処理
    entries.forEach((entry) => {
      // 要素が画面内に入った場合
      if (entry.isIntersecting) {
        const $target = jQuery(entry.target);

        // 要素にアクティブクラスを付与
        $target.addClass(activeClass);

        // 吹き出し内のテキストに含まれる最後の文字を取得
        const $lastSpan = $target.find('.speech-balloon p span').last();

        if ($lastSpan.length) {
          $lastSpan.on('animationend', function () {
            // すべての文字アニメーションが終了したタイミングでアイコン画像を差し替え
            $target.find('.speech-icon-image').attr('src', stopImageSrc);
          });
        }

        // 一度画面内に入った要素は監視対象から削除
        observer.unobserve(entry.target);
      }
    });
  }, options);

  // 取得した各要素に対して監視を開始
  elms.forEach((elm) => observer.observe(elm));
};

// DOMが完全に読み込まれたときに実行
document.addEventListener('DOMContentLoaded', function () {
  speechStop(
    '.man',
    'is-active',
    '停止した時の画像URL',
    { threshold: 0.2 }
  );
});

前述のコードをjavascript.jsに追加します。

以下のコードをstyle.cssに追加します。

.speech-balloon span {
  opacity: 0;
}

.cocoon-block-balloon.is-active .speech-balloon span {
  animation: text_anime_on forwards;
}

@keyframes text_anime_on {
  100% {
    opacity: 1;
  }
}