タイプライターで打っているかのように文字を表示する方法

javascript

javaScriptではいろいろな文字の表示方法や動きをつける事ができますが今回は文字をタイプライター風に表示する簡単な方法をご紹介します。

以下が例になります。

f:id:paiza:20170331122258g:plain

 

 

実装方法

まずは以下のiTyped.jsをダウンロードしてください。

次はダウンロードしたityped-masterの中にindex.htmlがあるので以下に変更してください。

<div id="app">
  <span id="ityped"></span>
</div>

<script src="https://unpkg.com/ityped@1.0.2"></script>
<script>
  ityped.init(document.querySelector("#ityped"), {
    showCursor: false,
    strings: ['みなさん、こんにちは!', '今日もいい天気ですね。']
  })
</script> 

以上となります。
これだけでタイプライターのようなアニメーションをつける事ができるので是非試してみてください。

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