【JavaScript】テキストを1文字ずつ表示してみる

こんにちは！セミマサです。今回はJavaScriptを使ってタグ内の文字を1文字ずつ表示してみました。

デモサイト
ソースコード
おわりに

デモサイト

今回のデモサイトです。

ソースコード

HTML

<section>
    <div class="text-box">
        <p id="text">今日もwebでセミが鳴く</p>
    </div>
</section>

<p id="text">今日もwebでセミが鳴く</p>

</div>

</section>

今回のHTMLです。

id:textを付与したp要素の中に表示したい文字を入れておきます。

CSS

.text-box{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100vw;
  height: 50vh;
}
#text{
  font-size: 1.5rem;
}
@media screen and (max-width: 480px) {
  #text{
    font-size: 1rem;
  }
}

.text-box{

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

width: 100vw;

height: 50vh;

}

#text{

font-size: 1.5rem;

}

@media screen and (max-width: 480px) {

#text{

font-size: 1rem;

}

今回のCSSです。

JavaScript

const text = document.getElementById("text").textContent;
document.getElementById("text").textContent = "";
count = text.length;
const wait = 200;

const textWriter = (_text)=>{
    let nowText = document.getElementById("text").textContent;
    let nextText;
    if(nowText.length < count){
        nextText = _text.charAt(nowText.length);
    }else{
        nowText = "";
        nextText = "";
    }
    document.getElementById("text").textContent = nowText + nextText;
};

setInterval("textWriter(text)",wait);