[JS]使い勝手がいい、文字を一つずつタイプライターのようにアニメーションで表示する軽量スクリプト -iTyped.js

サイト構築 -JavaScript

Post on:2017年1月25日

iTyped.jsのデモ

デモでは、タイプライターのように一文字ずつ複数の文字列が順番にアニメーションで表示されます。

デモページ

iTyped.jsの使い方

Step1 :外部ファイル

当スクリプトを外部ファイルとして記述します。

<body>
  ...
  コンテンツ
  ...
  <script src="ityped.js"></script>
</body>

<body>

...

コンテンツ

...

</body>

Step 2: 場所の確保

タイプライターのアニメーションで表示するエリアを確保します。

<span id="ityped" class="ityped"></span>

1	<span id="ityped" class="ityped"></span>

Step 3: アニメーションの設定

JavaScriptで、アニメーションの設定をします。

import { init } from 'ityped';

init(`#element`, {
  // required - for now, only accepting texts
    strings: ['Dead simple animated typing.', 'No dependencies'],
    //表示させる文字
    typeSpeed: 55, //default
    //表示する時のスピード
    backSpeed: 30, //default
    //戻る時のスピード
    startDelay: 500, //default
    //スタート時の遅延時間
    backDelay: 500, //default
    //戻る時の遅延時間
    loop: false, //default
    //ループの有無   
    showCursor: true, //default
    //カーソル表示の有無   
    cursorChar: "|", //default
    //カーソルの形状
    onFinished: function(){}
});

import { init } from 'ityped';

init(`#element`, {

// required - for now, only accepting texts

strings: ['Dead simple animated typing.', 'No dependencies'],

//表示させる文字

typeSpeed: 55, //default

//表示する時のスピード

backSpeed: 30, //default

//戻る時のスピード

startDelay: 500, //default

//スタート時の遅延時間

backDelay: 500, //default

//戻る時の遅延時間

loop: false, //default

//ループの有無

showCursor: true, //default

//カーソル表示の有無

cursorChar: "|", //default

//カーソルの形状

onFinished: function(){}

});

オプション

点滅カーソルを変更する際は、CSSを加えます。

.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;
    }
}