こんにちは。
今回はテキストにタイプライター風のアニメーションを実装できるJSライブラリ「iTyped.js」です。
テキストを一文字ずつタイプライターのようなアニメーションで表示できる軽量なJSライブラリを紹介します。
テキストにタイプライター風のアニメーションを実装できるJSライブラリ「iTyped.js」
iTyped.js
iTyped.jsをダウンロードしてみよう!
https://github.com/luisvinicius167/itypedにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。
iTyped.jsを設置してみよう!
html部分を記述します。
idを指定しますよ。
1 | <span id="element"></span> |
先程ダウンロードしたityped.jsを/bodyの手前に読み込みます。
1 | <script type="text/javascript" src="ityped.js"></script> |
その下に下記のスクリプトを記述します。
先程指定したidを記述しますよ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <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を加えますよ。
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; } } |
何となくJavaScriptを書いていた人が一歩先に進むための本
テキストにかっこいいアニメーションを実装したい時に使いたいですね。
以上でテキストにタイプライター風のアニメーションを実装できるJSライブラリ「iTyped.js」でした。