この記事では、CSSアニメーションを使って文字の色を1文字ずつ切り替えていくプログラミングコードを解説します。
目次
完成形
まずは完成形を見ていきます。
JavaScriptのコードで、文字を１文字ずつspanタグで囲み、CSSアニメーションを使って色を切り替えています。
See the Pen cssanimation-3 by aqua (@aqua-programdiary) on CodePen.
HTMLコーディング
最初にHTMLの型を入力してh1タグに適当な文字を入力します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, dolorum.</h1> <script src="main.js"></script> </body> </html>
<!DOCTYPE html>
HTML5の文書型宣言を示します。この行はHTML文書のバージョンとタイプを定義します。<html lang="ja">
HTML文書のルート要素であり、lang属性を使用して言語を指定しています（ここでは日本語）。<head>
ページのメタデータや外部リソースへのリンクなど、文書の情報を含むセクションです。<meta charset="UTF-8">
文書の文字セットをUTF-8に設定します。<meta name="viewport" content="width=device-width, initial-scale=1.0">
ページのビューポート設定を指定します。デバイスの幅に合わせてスケーリングされ、初期拡大率を1.0に設定します。<title>Document</title>
ページのタイトルを指定します。ブラウザのタブに表示されるタイトルです。<link rel="stylesheet" href="style.css">
外部のCSSファイル（style.css）を読み込みます。ページのスタイルを定義するために使用されます。
<body>: ページのコンテンツが表示されるセクションです。<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, dolorum.</h1>
大見出し（<h1>要素）で、テキスト “Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, dolorum.” が表示されます。<script src="main.js"></script>
外部のJavaScriptファイル（main.js）を読み込みます。ページの動的な振る舞いや機能を追加するために使用されます。
JavaScriptコーディング
次にHTMLで入力した<h1>要素内のテキストをJavaScriptで文字ごとに分割していきます。
let h1 = document.querySelector('h1');
h1.innerHTML = h1.innerText.split('').map((letters, i)=> `<span style="animation-delay: ${i*30}ms">${letters}</span>`).join('');
let h1 = document.querySelector('h1');
ページ内の最初に見つかる<h1>要素を取得してh1という変数に代入します。h1.innerHTML = ...h1要素の中身を書き換える操作を行います。.innerText.split('')innerTextプロパティで取得したテキストを文字ごとに分割します。これにより、テキストの各文字が配列として得られます。.map((letters, i) => ...)map関数を使用して、各文字ごとに新しい文字列を生成します。アロー関数内の処理は、各文字とそのインデックスに対して実行されます。<span style="animation-delay: ${i*30}ms">${letters}</span>
各文字を<span>要素で囲み、アニメーションの遅延を設定します。iは文字のインデックスで、${i*30}msによりアニメーション遅延が設定されます。.join('')map関数で生成された文字列配列を結合して、新しい文字列として返します。- 以上の操作により、
<h1>要素内のテキストがアニメーション付きの文字列に置き換わります。
CSSコーディング
最後にCSSでキーフレームを設定し、アニメーションを実装したら完成です。
@charset "utf-8";
span {
animation: color linear 5s infinite;
}
@keyframes color {
0% {
color: rgb(223, 20, 20);
}
10% {
color: rgb(243, 129, 36);
}
20% {
color: rgb(241, 224, 28);
}
30% {
color: rgb(98, 255, 0);
}
40% {
color: rgb(20, 138, 52);
}
50% {
color: rgb(39, 240, 243);
}
60% {
color: rgb(27, 24, 215);
}
70% {
color: rgb(143, 19, 174);
}
80% {
color: rgb(207, 42, 171);
}
90% {
color: rgb(235, 148, 43);
}
100% {
color: rgb(216, 23, 23);
}
}
@charset "utf-8";
文字セットをUTF-8に設定します。UTF-8は広く使用される文字エンコーディング方式です。span { animation: color linear 5s infinite; }span要素にcolorという名前のアニメーションを適用します。アニメーションは線形（linear）のタイミング関数で、5秒ごとに繰り返し（infinite）実行されます。@keyframes color { ... }colorという名前のキーフレームアニメーションを定義します。キーフレームアニメーションは、特定のキーポイント（0%、10%、20%、…、100%）で指定したスタイルに対してアニメーションを適用します。- 各キーポイントごとに指定されている色は、RGB値を使用して指定されています。たとえば、
0%のキーポイントでは赤い色（rgb(223, 20, 20)）になります。 - 各キーポイントの間でスムーズな色の遷移が行われ、アニメーションが実行されます。