はじめに
本記事では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
実行 & 結果確認
サーバを起動し動作を確認すると下記画像のように、落下アニメーションが適用されている事を確認できます。