CTAMARKの実装方法 | 練馬は普通の街

表示されるタイミングでアニメーションを開始するために、JavaScriptとIntersection Observer APIを使用して実装を行います

CSS

WordPressの管理画面で、「外観」>「テーマの編集」をクリックします。
「編集可能なテンプレート」の中から、style.css（スタイルシート）を選択し、以下のCSSコードを追加します。

.ctamark {
  display: inline;
  background-image: linear-gradient(90deg, #b7efb8, #b7efb8);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 4s ease;
}

.ctamark.visible {
  animation: marker-animation 3s ease forwards;
}

@keyframes marker-animation {
  0% {
    background-size: 0% 100%;
  }
  100% {
    background-size: 100% 100%;
  }
}

Javascript

header.php（ヘッダーテンプレート）を選択し、</head>タグの直前に以下のJavaScriptコードを追加します。

 <script>
  document.addEventListener("DOMContentLoaded", function() {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("visible");
            observer.unobserve(entry.target);
          }
        });
      },
      {
        threshold: 0.5,
      }
    );

    const markElements = document.querySelectorAll(".ctamark");
    markElements.forEach((mark) => {
      observer.observe(mark);
    });
  });
</script>

次に、記事やページのテキストにアニメーションを適用したい場所で、<mark>タグの代わりに<span>タグを使用し、class="mark"属性を追加してください。例:

これは<span class="ctamark">マーカーアニメーション</span>のサンプルです。

保存し、ページを更新して確認します。

この実装では、Intersection Observer APIを使用して、.markクラスの要素が画面に表示されたときに.visibleクラスを追加することで、アニメーションを開始します。

この方法により、要素が表示されるタイミングでアニメーションが実行されます。必要に応じてアニメーションの持続時間や速度カーブを調整してください。