0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

お題は不問!Qiita Engineer Festa 2024で記事投稿!
Qiita Engineer Festa20242024年7月17日まで開催中!

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

Last updated at Posted at 2024-06-15

はじめに

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

ゴール

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

dropSample.gif

ソース

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の拡張機能が便利。

image.png

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

 sass styles.scss styles.css

実行 & 結果確認

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

dropSample.gif

0
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?