iTyped.jsの使い方

1. はじめに

『iTyped.js』はテキストにタイピングアニメーションをつける『JSライブラリ』です。

jQueryを使用しないので動作が軽く導入しやすいというメリットがあります。

今回の記事をコピペしたらこの様なアニメーションになります。

2. ファイルをダウンロードする。

 GitHub『公式ページ』からファイルをダウンロードする方法もありますが、今回はCDNにて使用していきます。

1. CDNを記述する

<!-- index.html -->
<!-- bodyタグの下部に記述 -->

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

3.HTML記述

<!-- index.html -->

<div class = "text-content">
　<span class = "type-text" id="ityped"></span>
</div>

4. CSS記述

/* style.css */

.text-content{
 height: 100vh;
 width: 100vw;
 background-color: #000;
 text-align: center;
}
.type-text{
 color: #fff;
 font-size: 20px;
 line-height: 100vh;
}

5. <script>内にJSを記述

2で記述したCDNの直後に記述する。

   <!-- CDN -->
   <script src="https://unpkg.com/ityped@1.0.3"></script>
　　<script>
     ityped.init(document.querySelector("#ityped"), {
       strings: ['Hello World!!  ', 'Welcome to my memorandum!'],        //表示させたい文字の設定 区切りはカンマ 
       startDelay: 200,                                                  //アニメーション開始までの遅延、大きいほど遅れる
       typeSpeed: 100,                                                   //表示させるスピード、大きいほどゆっくり
       loop: false,                                                      //ループ
       backSpeed:  80,                                                   //戻るスピード
       backDelay:  150,                                                  //戻る時間指定
       showCursor: true,                                                 //カーソル表示
       cursorChar: "|",                                                  //カーソルとして表示するテキスト
     })
   </script>
</body>

今回使用したオプションの内容です。

詳しく知りたい方は公式の『GitHub』をご覧になってください。

strings: ['テキスト'], //表示させたい文字の設定 区切りはカンマ
startDelay: 200, //アニメーション開始までの遅延、大きいほど遅延する
typeSpeed: 100, //表示させるスピード、大きいほど遅い
loop: false, //ループ
backSpeed: 80, //戻るスピード
backDelay: 150, //戻る時間指定
showCursor: true, //カーソル表示
cursorChar: "|", //カーソルとして表示するテキスト

6. カーソルアニメーションCSS

公式の『GitHub』の『README.md』に記載されている物です。

/* カーソル */
.ityped-cursor {
 font-size: 1em;
 opacity: 1;
 -webkit-animation: blink 0.3s infinite;
 -moz-animation: blink 0.3s infinite;
 animation: blink 0.3s infinite;
 animation-direction: alternate;
 color: #fff;
}
@keyframes blink {
 100% {
     opacity: 0;
 }
}
@-webkit-keyframes blink {
 100% {
     opacity: 0;
 }
}
@-moz-keyframes blink {
 100% {
     opacity: 0;
 }
}

7.最後に

この様になれば完成です。

今回、実践した物は『GitHub』にて自身の備忘録、復習用として載せていますので気になる方は見てみてください。

GitHub : my-github.com