テキスト落下アニメーションを作ってみる（HTML/CSS/JS）

# はじめに
本記事ではHTML、CSS、JSを使用し、テキストに落下するアニメーションを実装する方法について紹介します。

# ゴール

次のような落下アニメーションを作成する事を本記事のゴールとする。

![dropSample.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/0bc7b534-6167-dbc0-5801-0ea8d7969e20.gif)


# ソース

## HTML
htmlファイルを準備します。
htmlでは`p`タグで`落下アニメーションをつけた文字サンプル` というテキストを表示させます。
アニメーションについて別のJSとCSSで作成するのでそれらのファイルをインポートしておきます。

```html:index.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>
  <div class="container">
    <p id="animated-text" class="animated-text">落下アニメーションをつけた文字サンプル</p>
  </div>
  
  <script type="module" src="main.js"></script>
</body>
</html>
```



# JavaScript
JavaScriptファイルを準備します。
指定されたid要素の文字列を1文字ごとに分割し、それぞれの文字に`animationDelay`を設定し表示を遅延させます。
詳細はコメントアウトの通りです。

```javascript:main.js
function animateText(id) {
     // 指定されたIDのテキスト要素を取得
    const text = document.getElementById(id);

    // テキストを文字ごとに分割して配列にする
    const characters = text.textContent.split('');
  
    // 元のテキスト要素を空にする
    text.innerHTML = '';
  
    characters.forEach((char, index) => {
      // 新しい<span>要素を作成
      const span = document.createElement('span');
      span.textContent = char;

      // 各文字にアニメーション遅延を設定
      span.style.animationDelay = `${index * 0.1}s`;

      // text要素の子要素に<span>要素を追加
      text.appendChild(span);
    });
  }
  
  document.addEventListener('DOMContentLoaded', function() {
    // 要素のIDを渡す
    animateText('animated-text'); 
  });
```

https://developer.mozilla.org/ja/docs/Web/CSS/animation-delay


# CSS
CSSファイルを準備します。
`keyframes`で文字列が落下するようなアニメーション作成し、`span`タグの要素にアニメーションを適用します。

```css:styles.css
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

.animated-text {
  font-size: 24px;
}
.animated-text span {
  display: inline-block;
  opacity: 0;
  animation: drop-in 1s ease forwards;
}

/* 落下アニメーション */
@keyframes drop-in {
  from {
    transform: translateY(-100%);
    color: #dff5ff;
  }
  to {
    transform: translateY(0);
    opacity: 1;
    color: #23406e;
  }
}
```


https://developer.mozilla.org/ja/docs/Web/CSS/animation-timing-function#ease

https://developer.mozilla.org/ja/docs/Web/CSS/animation-fill-mode#forwards



<details><summary>上記CSSをSassで書いた場合</summary>

```scss:styles.scss
$color-from: #dff5ff;
$color-to: #23406e;

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.text-wrapper {
  text-align: center;
}

.animated-text {
  font-size: 24px;

  span {
    display: inline-block;
    opacity: 0;
    animation: drop-in 1s ease forwards;
  }
}

@keyframes drop-in {
  from {
    transform: translateY(-100%);
    color: $color-from;
  }
  to {
    transform: translateY(0);
    opacity: 1;
    color: $color-to;
  }
}
```

:::note info
##### VscodeでSassを使用する場合

自動でCSSに変換してくれる`Live Sass Compiler`の拡張機能が便利。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/17ba10de-350d-5ae4-73ca-f8f094a62574.png)

:::

次のコマンドでコンパイルを実施。

```powershell
 sass styles.scss styles.css
```

</details>


# 実行 & 結果確認
サーバを起動し動作を確認すると下記画像のように、落下アニメーションが適用されている事を確認できます。


![dropSample.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/0bc7b534-6167-dbc0-5801-0ea8d7969e20.gif)