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などのステーブルコインも、対応するネットワーク経由であれば送金可能です。ただし、送金先のネットワークと選択するネットワークが一致していることを必ず確認してください。
初回送金時には少額でテスト送金することをおすすめします。