表示されるタイミングでアニメーションを開始するために、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
クラスを追加することで、アニメーションを開始します。
この方法により、要素が表示されるタイミングでアニメーションが実行されます。必要に応じてアニメーションの持続時間や速度カーブを調整してください。