JavaScript & CSSで簡単！ウェーブテキストアニメーションの作り方

## JavaScript & CSS で作るウェーブテキストアニメーション🎉

こんにちは、プログラミング仲間の皆さん！今回は、CSSとJavaScriptを組み合わせて、画面上で文字が波のように動く面白いアニメーションを実装する方法をご紹介します。
初心者でも一歩一歩理解できるように、分かりやすく解説していきます😊

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="XJrQbWM" data-pen-title="ウェーブテキストアニメーション" data-user="yamamotoyushi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yamamotoyushi/pen/XJrQbWM">
  ウェーブテキストアニメーション</a> by Yushi Yamamoto (<a href="https://codepen.io/yamamotoyushi">@yamamotoyushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>
---

## 1. プロジェクト概要📝

今回作成するアニメーションは、「freelance」という単語の各文字が、まるで波のように上下に動くエフェクトです。具体的には…

- **CSSアニメーション**を使って、各文字の上下移動を定義  
- 各文字に**段階的な遅延**を付け、連続した波の動きを表現  
- **JavaScript**でイベントに応じたインタラクティブな制御を追加（オプション）

---

## 2. HTMLの基本構造📄

まずは、HTML側で文字を個別の要素に分割しておきます。各文字を`<span>`タグで囲むことで、独立して動かすことができます。

```html
<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軸方向に移動する動きを作成します。

```css
.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を使ってマウスイベントに応じたアニメーション速度の調整を行います。たとえば、マウスオーバー時にアニメーションが速くなり、マウスアウトで戻るといった動きが可能です。

```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!✨

---
## **💖 ご支援いただけませんか？**

![スクリーンショット 2025-01-31 7.51.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637864/f9d94b4d-dbd3-ab70-6b2b-dfc289cda562.png)


このブログでは、高品質な情報提供と学習活動を通じて、読者の皆さまのお役に立つことを目指しています。もしこの記事が役立ったと感じていただけましたら、ご支援いただけると幸いです！

---

### **暗号資産による寄付**
以下のウォレットアドレスをご利用ください。**重要：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`

---

### **資金用途**
寄付金は以下の目的で活用させていただきます：

1. サーバー維持費やデザインツール購入  
2. 学習活動（オンラインコース受講・書籍購入）  
3. 読者向け無料コンテンツ制作  

ご協力いただいた皆さまには心より感謝申し上げます！ 🙏

---

### **補足情報**
- **Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX)について**  
  上記4つのネットワークは**同じウォレットアドレス**（`0x5CDA2F68f59F641B00aD172475c3d5fC10321174`）を使用します。ただし、送金時には、**絶対に**使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を**必ず**正しく選択してください。

- USDCやUSDTなどのステーブルコインも、対応するネットワーク経由であれば送金可能です。ただし、**送金先のネットワークと選択するネットワークが一致していることを必ず確認してください。**

- 初回送金時には少額でテスト送金することをおすすめします。

---