TOPページ にあるタイピング風文字アニメーションの実装方法をご紹介です。
まずはjQueryライブラリを設定します。
CDN
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
次に、t.jsを読み込みます。
下記Githubからダウンロード
またはjDeliverのCDNからライブラリを取得し設定します。
<script src="https://cdn.jsdelivr.net/gh/mntn-dev/t.js/t.min.js"></script>
アニメーションさせたいテキストを作成します
<p id="hoge">
Amiation Hoge
</p>
次にテキストをセレクタで指定し、tメソッドを実行する下記スクリプトを設定します。
<script>
$(function(){
$("#hoge").t()
});
</script>
これだけでOK。
Amiation Hoge
くわしいオプション設定は次回にまとめます。