JavaScript & CSS で作るウェーブテキストアニメーション🎉
こんにちは、プログラミング仲間の皆さん！今回は、CSSとJavaScriptを組み合わせて、画面上で文字が波のように動く面白いアニメーションを実装する方法をご紹介します。
初心者でも一歩一歩理解できるように、分かりやすく解説していきます😊
See the Pen ウェーブテキストアニメーション by Yushi Yamamoto (@yamamotoyushi) on CodePen.
---1. プロジェクト概要📝
今回作成するアニメーションは、「freelance」という単語の各文字が、まるで波のように上下に動くエフェクトです。具体的には…
- CSSアニメーションを使って、各文字の上下移動を定義
- 各文字に段階的な遅延を付け、連続した波の動きを表現
- JavaScriptでイベントに応じたインタラクティブな制御を追加（オプション）
2. HTMLの基本構造📄
まずは、HTML側で文字を個別の要素に分割しておきます。各文字を<span>タグで囲むことで、独立して動かすことができます。
<div class="wave-text">
<span>f</span>
<span>r</span>
<span>e</span>
<span>e</span>
<span>l</span>
<span>a</span>
<span>n</span>
<span>c</span>
<span>e</span>
</div>
ヒント: 任意の単語に対応する場合は、各文字を自動で分割するスクリプトを使うと便利です。
3. CSSでアニメーションの実装💻
次に、CSSを使って各文字が上下に動くアニメーションを実装します。ここでは@keyframesを活用して、Y軸方向に移動する動きを作成します。
.wave-text {
font-size: 4rem;
text-align: center;
margin: 2rem;
font-family: Arial, sans-serif;
}
.wave-text span {
display: inline-block;
animation: wave 1.2s ease-in-out infinite;
}
@keyframes wave {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
/* 各文字のアニメーション遅延設定 */
.wave-text span:nth-child(1) { animation-delay: 0.0s; }
.wave-text span:nth-child(2) { animation-delay: 0.1s; }
.wave-text span:nth-child(3) { animation-delay: 0.2s; }
.wave-text span:nth-child(4) { animation-delay: 0.3s; }
.wave-text span:nth-child(5) { animation-delay: 0.4s; }
.wave-text span:nth-child(6) { animation-delay: 0.5s; }
.wave-text span:nth-child(7) { animation-delay: 0.6s; }
.wave-text span:nth-child(8) { animation-delay: 0.7s; }
.wave-text span:nth-child(9) { animation-delay: 0.8s; }
このコードのポイント🔍
-
display: inline-block
各文字を独立して操作可能にします。 -
@keyframes wave
文字の上下移動を定義し、中央（50%）で-20px上に移動することで、波のような効果を出します。 -
animation-delay
各文字に少しずつ遅延を設定することで、連続的なアニメーションとなり、リアルな波の動きを表現します。
4. JavaScriptでインタラクティブに操作⚙️
さらに、JavaScriptを使ってマウスイベントに応じたアニメーション速度の調整を行います。たとえば、マウスオーバー時にアニメーションが速くなり、マウスアウトで戻るといった動きが可能です。
const waveText = document.querySelector('.wave-text');
// マウスオーバーでアニメーション速度短縮
waveText.addEventListener('mouseover', () => {
document.querySelectorAll('.wave-text span').forEach(span => {
span.style.animationDuration = '0.8s';
});
});
// マウスアウトで元の速度に戻す
waveText.addEventListener('mouseout', () => {
document.querySelectorAll('.wave-text span').forEach(span => {
span.style.animationDuration = '1.2s';
});
});
ポイント: ユーザーの操作に反応することで、アニメーションにインタラクティビティを追加できます。
5. ビジュアルな図解🖼️
以下は、アニメーションの流れを簡単な図で示しています。
[ f ] → [ r ] → [ e ] → [ e ] → [ l ] → [ a ] → [ n ] → [ c ] → [ e ]
↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑
タイムライン -> 遅延 0s, 0.1s, 0.2s, ... 0.8s
このように、各文字が順番に上下運動することで、まるで波が進むようなエフェクトを実現しています！
6. まとめ🎯
今回のチュートリアルでは、以下の点を解説しました：
- HTMLで文字毎に
<span>タグを配置する方法 - CSSの
@keyframesとanimation-delayで波のような動きを実現する方法 - JavaScriptでマウスアクションに基づくアニメーション制御の実装
ぜひ自分のプロジェクトに取り入れて、さらに楽しいエフェクトを追加してみてくださいね！プログラミングは試行錯誤が楽しいところ。これからも新しいアイデアを形にしていきましょう🚀。
Happy Coding!✨