ウェーブするテキスト
概要
テキストが順番にウェーブがかかるテキストです。
背景に色がついている場合でも、特定の文字だけ目立たせたいときに使えるアニメーションかと思います。
実装は、順番にスライドインするテキストと同じようにウェーブさせたいテキストをspanタグで一つずつ括り、それぞれカスタムプロパティで--indexというものを持たせます。
キーフレームアニメーションで、アニメーションを定義し、animation-delayに--indexを使うことにより、少しずつずらしてアニメーションを動かすことでウェーブを表現しています。
コードサンプル
HTML
<p class="order-wave-text js-scroll-anim">
<span style="--index: 0;">T</span>
<span style="--index: 1;">E</span>
<span style="--index: 2;">X</span>
<span style="--index: 3;">T</span>
</p>CSS
.order-wave-text {
padding-inline: 1em;
background: linear-gradient(90deg, #08254f 0%, #7cadf2 100%);
line-height: 2;
}
.order-wave-text span {
--index: 0; /* インデックスのデフォルト値 */
display: inline-block;
color: #f4f5f9;
}
.order-wave-text.is-active span {
animation: wave 0.3s ease-in-out;
animation-delay: calc(var(--index) * 0.1s);
}
@keyframes wave {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-0.5em);
}
100% {
transform: translateY(0);
}
}JavaScript
document.addEventListener("DOMContentLoaded", function () {
const scrollTriggers = document.querySelectorAll(".js-scroll-anim");
const revealObserver = new IntersectionObserver(
entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add("is-active");
revealObserver.unobserve(entry.target);
}
});
},
{
threshold: 0.1,
}
);
scrollTriggers.forEach(el => {
revealObserver.observe(el);
});
});