はじめに
本記事では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;
}
}
次のコマンドでコンパイルを実施。
sass styles.scss styles.css
実行 & 結果確認
サーバを起動し動作を確認すると下記画像のように、落下アニメーションが適用されている事を確認できます。
Comments
上記の方法だと、例えば
𩸽、𠮷、🙌などのサロゲートペアの文字は途中で分断されて文字化けしてしまうので、これらを含む文字列を分割しても文字化けさせたくないのであれば、スプレッド演算子を使って分割する方法が簡単で良いかと思います。ただし、この方法でも
👩👩👦👦のような結合文字列は個々の文字に分断されて👩👩👦👦のようになってしまうので、この分断も抑制するならIntl.Segmenter()を使用するといいかな、と思います。Let's comment your feelings that are more than good