【jQuery】超簡単!『typist.js』タイプライター風にテキストを1文字ずつ表示する方法
お洒落風に文字を表示したい時ありませんか?
そんなときに使えるプラグインがあります!
『typist.js』
こちらタイプライター風にテキストが1文字ずつ表示されます。
こんな感じでタイプライター風に文字が出てきます。
設定は3STEPで超簡単です!
STEP1:外部ファイルを読み込む
1 |
<script src="https://unpkg.com/ityped@1.0.3"></script> |
STEP2:HTMLに要素を追加する
1 |
<span id="typist"></span> |
STEP3:JavaScriptを追加する
1 2 3 4 5 6 7 8 9 10 11 |
<script> ityped.init('#typist', { strings: ['タイピスト', '簡単だよ!'], typeSpeed: 100, backSpeed: 100, startDelay: 300, backDelay: 1000, loop: true, showCursor: true, }); </script> |
オプション
strings | 入力文字列を指定、[,]で複数指定で順番に表示 |
---|---|
typespeed | 入力速度(数字が小さいほど早くなります) |
backspeed | 消去速度(数字が小さいほど早くなります) |
strartdelay | 指定ミリ秒待ってから入力(数字が小さいほど早くなります) |
backdelay | 指定ミリ秒待ってから消去(数字が小さいほど早くなります) |
loop | ループ(’true’ or ‘false’) |
showCursor | 入力文字のすぐ後ろにカーソルを表示 |
おすすめ記事

【JavaScript】簡単に設置できる郵便番号検索『ajaxzip3』使い方をご紹介!フォームを使用してもらうためにはユーザー目線で作成することが必要になります。「こんな機能があったら入力が便利なのに…」と客観的に観察することでいかに使いやすいフォームにするか考えることが重要です。「郵便番号を入力したら住所が自動表示される」機能をご紹介します。

【JavaScript】割り算の「切り捨て」「切り上げ」「四捨五入」についてまとめJavaScriptで割り算の「切り捨て」「切り上げ」「四捨五入」についてご紹介します。JSを使って計算をするというのはWEBデザイナーなら誰しも行いますよね。
今は使わなくてもいずれ使う場面が出てくると思います。
知っていて損はないのでこの機会にぜひ覚えましょうー!
今は使わなくてもいずれ使う場面が出てくると思います。
知っていて損はないのでこの機会にぜひ覚えましょうー!

【JavaScript】全ての文字を置換する方法は「replace」と「正規表現」今回はJavaScriptで全ての文字を置換する方法についてご紹介いたします。置換の基本は「replace」しかし、ただreplaceをするだけでは全ての文字は置換されないんですね。そこで全部の文字を置換するには「正規表現」を使いましょう!!