Webサイトでよくある、1文字ずつ文字を表示させる方法について備忘録としてまとめていきます。
やりたいこと
サイト上に表示されているテキストを1文字ずつ分割し、それぞれが順番に表示されるようにしたい
方法
以下、上記実装にあたる方法をまとめていきます。
文字を分割するメソッドsplitを活用し、定義した配列に格納する
splitメソッドで分割化したい文字を定義
const txtSingle1 = "分割したい文字".split("");
今回はtxtSingle1という定数を定義し、”分割したい文字”という文字列をsplit(“”)メソッドを使って文字列を分割し、txtSingle1に配列として代入する。
“分””割””し””た””い””文”字”
上記がtxtSingle1に代入される値となります。
分割したものをspanタグで囲い、cssの付与ができるようにする
続いて、コンポーネントのreturn内に前段で定義した配列を呼び込み、spanタグに呼び出します
<span className="txt-single">
{txtSingle1.map((char, index) => (
<span key={index} style={{ animation: `fadeIn 0.3s ease ${index * 0.1}s forwards`, opacity: 0 }}>
{char}
</span>
))}
</span>
ひとつひとつ説明していきます。
まずは下記の構文
txtSingle1.map((char, index)
こちらの構文は下記構文を使用しています。
map((element, index) => { /* … */ })
element
配列内で現在処理中の要素をコンテキスト内の変数で決めています（変数名は任意）。
index
indexは.map()関数が配列の各要素に対して呼び出される際に自動的に与えられる値で、その要素が配列の中で何番目に位置しているかを示します。たとえば、配列["分","割","し","た","い","文","字"]に対して.map()を呼び出すと、"分"のindexは0、"割"のindexは1、"し"のindexは2、という具体的な値が与えられます。
参考https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map
続いて下記構造
<span key={index} style={{ animation: `fadeIn 0.3s ease ${index * 0.1}s forwards`, opacity: 0 }};
{char}
</span>
keyはindexの数値に合う配列内の値を追跡しているため、”分割したい文字”の中身を変更した際に、該当の部分だけを再レンダリングしてくれます。
これはreactでリストとなっているものに対しkeyをつける事が推奨されており、レンダリングを最適化してくれる効果がありますが、今回は静的な部分なのでなくても実装可能です。
charは配列となったテキストなので、上記のような流れで全てのテキストを順番にspanで囲んでいきます。
${index * 0.1}sは、indexが配列の番号を示しているので、一文字ずつ秒数がずれてく仕組みとなります。
CSSで別途アニメーションを用意します
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-100px);
}
to {
opacity: 1;
transform: translateY(0px);
}
}
上記アニメーションをfadeInで読み込んで、秒数をずらしているという形になります。
style={{ animation: `fadeIn 0.3s ease ${index * 0.1}s forwards`, opacity: 0 }}
コメント