[JS]使い勝手がいい、文字を一つずつタイプライターのようにアニメーションで表示する軽量スクリプト -iTyped.js
Post on:2017年1月25日
sponsors
jQueryなど他のスクリプトは不要、しかも2.3kBの超軽量、文字をタイプライターのようにアニメーションで表示するJavaScriptのライブラリを紹介します。
iTyped.jsのデモ
デモでは、タイプライターのように一文字ずつ複数の文字列が順番にアニメーションで表示されます。
iTyped.jsの使い方
Step1 :外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 2 3 4 5 6 |
<body> ... コンテンツ ... <script src="ityped.js"></script> </body> |
Step 2: 場所の確保
タイプライターのアニメーションで表示するエリアを確保します。
|
1 |
<span id="ityped" class="ityped"></span> |
Step 3: アニメーションの設定
JavaScriptで、アニメーションの設定をします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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を加えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.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; } } |
sponsors
