javascriptのsplitを使い1文字ずつ表示する[jQueryなし]

javascriptのsplitを使い1文字ずつ表示する[jQueryなし]

こんにちは。

プログラミング学習中のdynaです。

この記事は、Javascriptを学習している方向けに、 Javascriptで1文字ずつ表示する方法を記録しています。 

やり方は色々あると思うのですが、ここでは1文ずつ<span>タグで囲み、表示しています。

デモはこちら↓ 右下のrerunを押せばまた動きます。

 

See the Pen split-javascript-CSS by dyna (@sakudyna) on CodePen.


考え方

 

①HTMLから1文字ずつ表示したい文字を取得

②①をsplitで区切り、<span></span>で囲む

③②のそれぞれに表示するstyleを付与する(元の要素には不透明度0を設定しておく)、遅延表示で1文字ずつ表示させる


全体コードはデモのcodepenにありますので、ご覧ください。

では詳細を見ていきます。


①HTMLから1文字ずつ表示したい文字を取得

コードを見ていきます。

HTML↓


今回取得して、1文字ずつ表示したいのは、

 <p id = “text”>javascript-sample</p> 

の部分です。

 

取得するJavaScriptはこちら↓


用語の簡単な説明は以下です。

document.getElementById
id プロパティが指定された文字列に一致する要素を表す Element オブジェクトを返します。

Element.innerHTML
要素内の HTML または XML のマークアップを取得したり設定したりします。

引用元:https://developer.mozilla.org/


つまり、要素(変数 spanText)要素内のHTML(変数 text)を取得しているのね。


②①をsplitで区切り、<span></span>で囲む

要素が取得できたので、innerHTMLで取得した内容を<span></span>で囲みます。

対象のJavaScript↓ 


詳細は以下です。

文字を分割して、それぞれに<span>を付与したいので、split関数を使用しました。

split関数
stringObj.split(区切り文字 または 正規表現[, 分割数]

文字列を分割して、配列に格納できます。


ちなみにここでいう「javascript-sample」を split(“”) で区切ると、下図のように配列で確認できます。

Javascript↓

JavaScript

 

console.log↓

console.log

splitで分割した配列を forEach で回して<span>を付与します。


forEachについてはこちら↓

forEach()
forEach() メソッドは与えられた関数を、配列の各要素に対して一度ずつ実行します

引用元:https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

 

ここでは
配列名.forEach( コールバック関数(要素の値, 要素のインデックス, 配列) )
という形で使用しています。

 

デモのコードでいうと、

text.split.(“”).forEach( function(value){  ←ここのfunction内がコールバック関数

newText += “<span>” + value + “</span>”;

})

という形になります。


分割した配列の中身1つずつに、function内の処理を実行しているのね。
valueはここでいう配列の値(”j”,”a”,”v”,…….)ね。


③②のそれぞれに表示するstyleを付与する

さて、1文字ずつ分割して<span>で囲ったので、その中についでにスタイルも設定してしまいます。

 

考え方としては

CSSで要素の不透明度を0 ⇒ styleを付与(不透明度0から不透明度1へアニメーション)+ CSSのdelayをずらして、1文字ずつ遅延して表示させる

です。

 

元のCSS↓

先ほどと一緒ですが、JavaScript ↓


マーカー部分の

span style =”animation:showtext 3s ease ‘ + [i]*0.2 + ‘s forwards;”

が遅く表示させる仕組みです。

styleでCSSへ記載した@keyframesアニメーションションを指定し、実行時間を [ i ]*0.2s として遅延させています。

※ i は要素のインデックス数。

 

スタイルの説明をすると、

キーフレームは opacityを0から1に

アニメーションは 

showtext 3s ease 0.2s forwards;

(アニメーション名 実行完了時間 進行速度 開始遅延時間 アニメーション完了後のスタイル)  

のような形になっています。

0.2sの値は、i × 0.2 で出しているので、後半になるにつれ、アニメーションの開始が遅くなります。

 


最後に

こんな感じでできました!

もともと考えていたのは、JSでCSSのクラスにstyleを追加して、アニメーションの実行時間を遅延させるやり方でした。

※ obj.style.animaition = “~~~” みたいな書き方。

でもこれだと書き方が悪いのか、うまく動かず( ^ω^)・・・

 

以下の参考サイト様を見させていただき、そもそも<span>で全部記載しちゃえばいいのか・・・と気づき

書き直して現在形に至ります。

参考サイト様 ↓ とってもわかりやすいので、おすすめです。

https://coco-factory.jp/ugokuweb/move02/8-11/ 

 

ここまで読んで下さりありがとうございます。

気になる点がございましたら、問い合わせよりお願いいたします。

 

<あわせて読みたい>