【jQuery】t.jsでタイピング風の文字アニメーションを簡単に実装する

TOPページ にあるタイピング風文字アニメーションの実装方法をご紹介です。

まずはjQueryライブラリを設定します。

CDN

https://code.jquery.com/
<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

次に、t.jsを読み込みます。

下記Githubからダウンロード

https://github.com/mntn-dev/t.js

または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

くわしいオプション設定は次回にまとめます。

この記事のご感想やコメントはこちら

メールアドレスが公開されることはありません。 が付いている欄は必須項目です