jQueryプラグインTyped.jsの使い方

2021年8月9日jQuery

jQueryプラグインTyped.jsの使い方を紹介します。

jQueryプラグインTyped.jsの使い方

npm install typed.js
yarn add typed.js

cdnの場合、

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

jQueryとtaped.jsを読み込みます。
自作のJavaScriptファイルの前に読み込みます。

jQueryは、下のLibrariesに最新のurlの記載があります。
https://developers.google.com/speed/libraries

Typed.jsは下に最新のurlの記載があります。
https://github.com/mattboldt/typed.js

html

    <h1 class="heading-primary">I am <span class="typed"></span></h1>

上の場合、typedクラスをつけたspanタグの中の文字をタイピングのアニメーションを付与した形で出力することができます。

jsファイル

document.addEventListener('DOMContentLoaded', function () {
  var typed = new Typed('.typed', {
    strings: [
      'Developer',
      'Designer',
      'Web Marketer'
    ],
    typeSpeed: 20,
    backSpeed: 20,
    startDelay: 2000,
    loop: true,
  });
});

上のようにすると、stringsの配列の文字列が順番に出力されます。
typeSpeedやbackSpeedでタイピング速度を調整することができます。
startDelayでそれぞれの文字の表示時間を調整できます。