当サイト使用テーマ
\ SWELL【WordPressテーマ】 /
当サイト使用サーバー
\ レンタルサーバー【ConoHa WING】 /
プログラミング学習
この記事では、CSSアニメーションを使って文字の色を1文字ずつ切り替えていくプログラミングコードを解説します。
まずは完成形を見ていきます。
JavaScriptのコードで、文字を1文字ずつspanタグで囲み、CSSアニメーションを使って色を切り替えています。
See the Pen cssanimation-3 by aqua (@aqua-programdiary) on CodePen.
最初に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>
<html lang="ja">
lang
属性を使用して言語を指定しています(ここでは日本語)。<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">
<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>
次に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でキーフレームを設定し、アニメーションを実装したら完成です。
@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";
span { animation: color linear 5s infinite; }
span
要素にcolor
という名前のアニメーションを適用します。アニメーションは線形(linear)のタイミング関数で、5秒ごとに繰り返し(infinite)実行されます。@keyframes color { ... }
color
という名前のキーフレームアニメーションを定義します。キーフレームアニメーションは、特定のキーポイント(0%、10%、20%、…、100%)で指定したスタイルに対してアニメーションを適用します。0%
のキーポイントでは赤い色(rgb(223, 20, 20))になります。