Webサイトで、見出しやキーワードに動きをつけることで、視認性やデザイン性を向上させることができます。
特に、スクロールに合わせて 「下線がスッと表示される」エフェクト は、ユーザーの目を引きつけ、スタイリッシュな印象を与えます。
本記事では、CSSのグラデーションとJavaScriptのIntersection Observer API を組み合わせて、 テキストに動的な下線アニメーションを追加 する方法を解説します！
また、応用編としてカスタマイズ方法も紹介 するので、ぜひ最後までお読みください。
このアニメーションのメリット
ユーザーの視線を誘導できる
見出しやキーワードに動きを加えることで、重要な情報を効果的に伝えることができます。
デザイン性を向上できる
静的なページに動きを加え、サイト全体の印象を洗練させます。
軽量でパフォーマンスが良い
Intersection Observer API を利用することで、スクロールイベントの負荷を軽減 しつつ、高速なアニメーションを実現できます。
実装するアニメーションの動作
h1、h2、dd の span に下線アニメーションを適用
スクロールで要素が50%以上表示されたらアニメーションを発動
下線が左から右へと広がるエフェクト
完成コード
以下のコードをコピペすれば、すぐに動作を確認できます！
1. HTML（対象となる要素）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下線アニメーションデモ</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1><span class="under-line">スクロールで下線アニメーション</span></h1>
<h2><span class="under-line">見出し2のサンプル</span></h2>
<dd><span class="under-line">定義リストのテキスト</span></dd>
<script src="script.js"></script>
</body>
</html>2. CSS（下線アニメーションのスタイル）
/* 下線の初期状態 */
.under-line {
background: linear-gradient(transparent 75%, #FFCE00 60%);
background-repeat: no-repeat;
background-size: 0% 100%;
background-position: left bottom;
padding-bottom: 5px;
}
/* アニメーションの定義 */
@keyframes underLine {
100% {
background-size: 100% 100%;
}
}
/* スクロール時にアニメーション適用 */
.under-line-visible {
animation: underLine 1s ease-out 0.5s forwards;
}3. JavaScript（スクロール監視とアニメーションの発火）
document.addEventListener('DOMContentLoaded', function() {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('under-line-visible');
}
});
}, { threshold: 0.5 });
// h1, h2, dd の span を対象に監視
document.querySelectorAll('h1 span, h2 span, dd span').forEach((el) => {
observer.observe(el);
});
});コードの詳細解説
① CSSで下線アニメーションを定義
• .under-line クラス
• background に linear-gradient を適用し、下線を作成
• 初期状態では background-size: 0% に設定し、下線が非表示の状態 にする
• @keyframes underLine
• background-size: 100% に変化させ、左から右へスッと伸びるエフェクト を作成
• .under-line-visible
• Intersection Observer で .under-line-visible クラスが追加されると、アニメーションが発動
② JavaScriptでスクロールを監視
• IntersectionObserver を利用し、要素が50%以上表示されたら .under-line-visible クラスを追加
• querySelectorAll(‘h1 span, h2 span, dd span’) を使い、対象要素を一括で取得 し、効率的に処理
応用編：アニメーションをカスタマイズしよう！
さらに カスタマイズすることで、より魅力的なデザインに変更可能 です！
以下のカスタマイズ例を参考に、自分のサイトに最適なデザインを作成してください。
1. 下線の色を変更
.under-line {
background: linear-gradient(transparent 75%, #00BFFF 60%);
}青色の下線に変更！
ブランドカラーに合わせて変更可能。
2. アニメーションの速度を変更
.under-line-visible {
animation: underLine 0.8s ease-in 0.3s forwards;
}0.8秒で素早くアニメーションする設定！
3. アニメーションの開始位置を右にする
.under-line {
background-position: right bottom;
}右から左へアニメーションするデザインに変更！
まとめ
本記事では、CSSのグラデーションとJavaScriptのIntersection Observer API を活用して、スクロール時に下線がアニメーションするエフェクト を実装しました。
シンプルなコードで、動的なデザインを追加可能！
視線誘導の強化に役立つ！
軽量 & 高パフォーマンスな実装！