自動タイピングを実装する
この記事で作るもの
このような自動でタイピングされるUIです。
株式会社いづつや本店様 (https://idutsuyahonten.jp/web/)
手順
素材のダウンロード
Githubから素材をダウンロードして、開発中のディレクトリに配置する。
https://github.com/mntn-dev/t.js
Download ZIPをクリックしてダウンロードし
このようなフォルダごと、開発中のディレクトリに配置します。
ファイルを読み込む
HTML
<head>
</script>
<script src="t.js-master/t.min.js"></script>
<script src="t.js"></script>
</head>
htmlのheadタグ内で、必要なファイルを読み込みます。
これは、jQuery自体を読み込む記述
</script>
これは、先ほどダウンロードしたフォルダ内の必要なファイルを読み込む記述
<script src="t.js-master/t.min.js"></script>
<script src="t.js"></script>
これは、新規作成しました。
自動タイピング機能を発火させる記述やオプション設定を書くファイルです。
ファイルに必要なコードを書く
HTML
<div id="js-target" class="box">
<h1>My Portfolio</h1>
</div>
これで自動タイピング表示させたい要素を囲います。
<div id="js-target" class="box">
</div>
t.js
$(function(){
$('#js-target').t();
})
jQueryにはこの記述をするだけです。
先ほど囲ったdivタグのidを取得しています。
以上のコードで
このような動きが表現できました。
オプションを指定するには
t.jsをこのようにして
$(function(){
$('#js-target').t({
});
})
一番内側の{ }内にオプションを指定します。
スピードを遅くしたい時
デフォルトの50から100にすると、スピードが遅くなります。
$(function(){
$('#js-target').t({
speed: 100
});
})
カーソルを非表示にしたい時
$(function(){
$('#js-target').t({
speed: 100,
caret: false
});
})
caret: false
を指定します。
カーソルを横並びにして、スタイルを変更したい時
親要素であるboxにdisplay: flex;を適応させます。
.box {
display: flex;
}
カーソルの要素はこうなっています
なので、t-caretにスタイルを当てることができます。
.t-caret {
font-size: 40px;
color: rgba(0,0,0,0.2)
}
文字のクラスに
.box h1 {
margin-right: 20px;
}
これを適応させれば、カーソルとの間隔を開けることもできます。
ここまでのコードで
こんな感じになりました！
参考にしたサイト
アド・エータイプ(https://www.dataplan.jp/blog/jquery/1022)
LIG (https://liginc.co.jp/396513)
ASCll.jp (https://ascii.jp/elem/000/000/954/954307/)
