タイピング風テキストをcssとJavaScriptで作ってみた

スポンサーリンク
css

おしゃれサイトでありそうなタイピング風にテキストが出現するものを作ってみました。

完成品

完成したのがこちらです。ボタン押下でテキスト内の単語がタイピングしているように出てきます。

See the Pen
typing
by Seiya Takahashi (@takasei)
on CodePen.

<form class="textInputForm">
  <input type="text" id="text" value="app crafts">
  <input type="button" value="button" onclick="getTextValue('text');">
</form>

<div class="typing-content">
  <span id="typingText" class="typingText"></span>
</div>
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');

body{
  font-family: 'Abril Fatface', cursive;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;  
  min-height: 100vh;
  background:#000;
}

.textInputForm{
  margin-bottom:50px;
}

.typingText {
  display: inline-block;
  width:100%;
  font-size:60px;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid transparent;
}

.animation-small{
    animation: typing 1s steps(5), caret 0.3s step-end infinite;
}
.animation-middle{
    animation: typing 2s steps(10), caret 0.3s step-end infinite;
}
.animation-large{
    animation: typing 3s steps(20), caret 0.3s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }
}
@keyframes caret {
  50% {
    border-right-color: #fff;
  }
}
//初期処理
window.onload = function(){
  getTextValue('text');
}

//ボタン押下時処理
function getTextValue(text){
  //アニメーション削除
  document.getElementById( "typingText" ).classList.remove("animation-small");
  document.getElementById( "typingText" ).classList.remove("animation-middle");
  document.getElementById( "typingText" ).classList.remove("animation-large");

  //テキスト入力を取得しtypingText要素に代入
  var input = document.getElementById(text).value;
  var inputInnerText = input.innerText;
  document.getElementById( "typingText" ).innerText = input;
  
  //アニメーションリセット(おまじない)
  document.getElementById( "typingText" ).offsetWidth = document.getElementById( "typingText" ).offsetWidth;
  
  //アニメーション追加
  if(input.length <= 5){
      document.getElementById( "typingText" ).classList.add("animation-small");
  }else if(input.length > 5 || input.length < 15){
      document.getElementById( "typingText" ).classList.add("animation-middle");
  }else{
      document.getElementById( "typingText" ).classList.add("animation-large");
  }
}

ポイント

・white-spaceプロパティで文字を折り返さないように設定
・animationでキャレット(脱字の挿入を指示する記号)の点滅を表現
・animationで文字が少しずつ現れタイピングしているように表現

white-spaceプロパティで文字を折り返さないように設定

white-spaceは改行やスペース、タブの扱いを指定するプロパティで、nowrapを設定することで改行しないようにしています。

white-space: nowrap;

指定なしだと以下のような感じ。

参考:https://developer.mozilla.org/ja/docs/Web/CSS/white-space

animationでキャレット(脱字の挿入を指示する記号)の点滅を表現

キャレット感を出すためにはanimationで枠線の表示非表示を交互に行うようにすることで、点滅感を表現しています。該当箇所は以下。

css

animation: caret 0.3s step-end infinite;

@keyframes caret {
  50% {
    border-right-color: #fff;
  }
}

step-end はアニメーションの速さを指定するもので、最後に一瞬でアニメーション終了時の状態になる設定。
infiniteはアニメーションを無限に繰り返す設定。
@keyframes は、アニメーション開始から終了するまでどのようなアニメーションをするのか指定できるCSSの文法で枠線の右側部分のみの色を文字の色に変更。

animationで文字が少しずつ現れタイピングしているように表現

タイピング感は文字を一定の感覚で表示させるようにすることで打っている感じを出しました。
該当箇所は以下。

css

.animation-small{
    animation: typing 1s steps(5), caret 0.3s step-end infinite;
}
.animation-middle{
    animation: typing 2s steps(10), caret 0.3s step-end infinite;
}
.animation-large{
    animation: typing 3s steps(20), caret 0.3s step-end infinite;
}


@keyframes typing {
  from {
    width: 0;
  }
}

stepsは引数一個で指定することで、アニメーションのタイミングを段階に分けることができ、ここではJavaScriptで文字数によって三段階で段階数を分けていますが、例えば1s steps(5)だったら1秒の間に5回の段階に分けてアニメーションを実行するように設定しています。
@keyframes では、widthを0からスタートさせるように設定。

終わりに

背景画像の前面にこのテキストを載せて表示するとおしゃれな表示ができそう。
読んでいただきありがとうございました!

cssJavaScript
スポンサーリンク
app crafts

コメント

タイトルとURLをコピーしました