［JavaScript］iTyped.jsでタイピングアニメーションをサクッとつくる

f:id:jyouj:20181213001422g:plain

面白いアニメーションを実装できるJavaScriptのライブラリがあったので紹介します。簡単にタイピングアニメーションを実装できるiType.jsです。

早速実装しよう！

まずは導入してみましょう！

bodyタグの上ら辺に。

<script src="https://unpkg.com/ityped@1.0.2"></script>

それでは作っていきましょう。

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

HTMLはこんな感じで、JSとCSSにもこう記述しましょう。

ityped.init(document.querySelector("#ityped"), {
      loop: false,
      showCursor: false,
      strings: ["My name is jyouj__!"]
    })

loopをfalseにして繰り返し処理をしていませんが、繰り返してタイピングアニメーションをつけたい時はtrueにして置いてください。

    .ityped-cursor {
      font-size: 2.2rem;
      opacity: 1;
      -webkit-animation: blink 0.3s infinite;
      -moz-animation: blink 0.3s infinite;
      animation: blink 0.3s infinite;
      animation-direction: alternate;
    }
    @keyframes blink {
      100% {
        opacity: 0;
      }
    }
    @-webkit-keyframes blink {
      100% {
        opacity: 0;
      }
    }
    @-moz-keyframes blink {
      100% {
        opacity: 0;
      }
    }