はじめに

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

ゴール

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

ソース

HTML

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

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を設定し表示を遅延させます。
詳細はコメントアウトの通りです。

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'); 
  });

CSS

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

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;
  }
}

上記CSSをSassで書いた場合

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;
  }
}

VscodeでSassを使用する場合

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

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

 sass styles.scss styles.css

実行 & 結果確認

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