HOME > 制作 > Javascript > テキストにタイプライター風のアニメーションを実装できるJSライブラリ「iTyped.js」

テキストにタイプライター風のアニメーションを実装できるJSライブラリ「iTyped.js」

Javascript

2017/02/03

こんにちは。
今回はテキストにタイプライター風のアニメーションを実装できるJSライブラリ「iTyped.js」です。

テキストを一文字ずつタイプライターのようなアニメーションで表示できる軽量なJSライブラリを紹介します。

テキストにタイプライター風のアニメーションを実装できるJSライブラリ「iTyped.js」

iTyped.js

ityped-js

DEMO DOWNLOAD

iTyped.jsをダウンロードしてみよう！

https://github.com/luisvinicius167/itypedにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。

iTyped.jsを設置してみよう！

html部分を記述します。
idを指定しますよ。

<span id="element"></span>

1	<span id="element"></span>

先程ダウンロードしたityped.jsを/bodyの手前に読み込みます。

<script type="text/javascript" src="ityped.js"></script>

1	<script type="text/javascript" src="ityped.js"></script>

その下に下記のスクリプトを記述します。
先程指定したidを記述しますよ。

<script>
import { init } from 'ityped';

init(`#element`, {
  // required - for now, only accepting texts
    strings: ['Dead simple animated typing.', 'No dependencies'],
    //optional
    typeSpeed: 55, //default
    //optional
    backSpeed: 30, //default
    //optional
    startDelay: 500, //default
    //optional
    backDelay: 500, //default
    //optional
    loop: false, //default
    //optional    
    showCursor: true, //default
    //optional    
    cursorChar: "|", //default
    // optional callback called once the last string has been typed
    onFinished: function(){}
});
</script>

import { init } from 'ityped';

init(`#element`, {

// required - for now, only accepting texts

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

//optional

typeSpeed: 55, //default

//optional

backSpeed: 30, //default

//optional

startDelay: 500, //default

//optional

backDelay: 500, //default

//optional

loop: false, //default

//optional

showCursor: true, //default

//optional

cursorChar: "|", //default

// optional callback called once the last string has been typed

onFinished: function(){}

});

</script>

点滅のカーソルを実装する際は、下記の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;
    }
}