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!✨
💖 ご支援いただけませんか？
このブログでは、高品質な情報提供と学習活動を通じて、読者の皆さまのお役に立つことを目指しています。もしこの記事が役立ったと感じていただけましたら、ご支援いただけると幸いです！
暗号資産による寄付
以下のウォレットアドレスをご利用ください。重要：Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX) は、全て以下の同一アドレスを使用しますが、送金ネットワークの選択を間違えると資金が失われます！ 送金時には、絶対に使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を必ず正しく選択してください。
-
Ethereum (ETH)
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
（ネットワーク: ERC-20） -
BNB Chain (BNB)
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
（ネットワーク: BEP-20） -
Polygon (MATIC)
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
（ネットワーク: Polygon） -
Avalanche (AVAX)
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
（ネットワーク: Avalanche C-Chain） -
Solana (SOL)
EnPFbqDbF67rU9mAPvfgh4YYtncJNbFQ9NLQ5R6z5S2f -
Stellar (XLM)
アドレス:GCSMWCACKVEZ737GZAV4AJRFL52ZZKVQ7M3B3KYY64JJGOAO2GDYKABO
メモ: 必要に応じて入力してください。 -
Ripple (XRP)
アドレス:r1s4EASr3zQRrfpDA3ptTahezBhGo2hhN
タグ: 必要に応じて入力してください。 -
Cardano (ADA)
addr1q8heq6ddw8rwlqa5hqlucnfk36arah9tzc8ajxvu83870h7lrre25wzq9yemex857we56cm0xu8tmxqvm8nykmtgsjdqavdpv7 -
Dogecoin (DOGE)
DRFZ9JhAk3DTtu1tV85cawekWNrm1vKm3H
資金用途
寄付金は以下の目的で活用させていただきます：
- サーバー維持費やデザインツール購入
- 学習活動（オンラインコース受講・書籍購入）
- 読者向け無料コンテンツ制作
ご協力いただいた皆さまには心より感謝申し上げます！ 🙏
補足情報
-
Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX)について
上記4つのネットワークは同じウォレットアドレス（0x5CDA2F68f59F641B00aD172475c3d5fC10321174）を使用します。ただし、送金時には、絶対に使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を必ず正しく選択してください。 -
USDCやUSDTなどのステーブルコインも、対応するネットワーク経由であれば送金可能です。ただし、送金先のネットワークと選択するネットワークが一致していることを必ず確認してください。
-
初回送金時には少額でテスト送金することをおすすめします。