タイピングのようなテキストアニメーションを「VueTyper」で実装する

VueTyperとは

VueTyperは、タイピングをしてるかのようにテキストを表示するVue.js用のコンポーネントライブラリです。

リピート回数やディレイ時間などを自由に設定することが可能です。

環境

Vue	2.6.10
vue-typer	1.2.0

インストール

以下のnpm、CDNを使ってインストールします。

npm

npm install --save vue-typer

CDN

<script src="https://unpkg.com/vue-typer/dist/vue-typer.min.js"></script>

gitリポジトリは以下から取得できます。

https://github.com/cngu/vue-typer

導入手順

1. ライブラリの取り込み

（1）ES6等の場合 [注意]モジュール版は未検証です。

import { VueTyper } from 'vue-typer'
// or
const VueTyper = require('vue-typer').VueTyper

（2）CDNの場合

const VueTyper = window.VueTyper.VueTyper

2.メソッドを設定

上記で取得したVueTyperをcomponentsに取り込みます。

new Vue({
  el: '#app',
  components: {
    'vue-typer': VueTyper
  },
  data: {
    text: 'Hello World! I was registered locally!'
  }
});

3. テンプレートを準備

<vue-typer> を設置します。

text プロパティは必須です。
StringもしくはArrayで値を設定します。

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <p><input type="text" v-model="text"></p>
  <vue-typer :text="text"></vue-typer>
</div>

サンプル

>>専用ページで確認する

プロパティ

コンポーネントには以下のプロパティを設定することが可能です。

[注意]HTMLに記載する場合はケバブケースを使用します。

プロパティ名	設定型	説明
text	String \|\| Array	[必須]文字列もしくは配列で値を設定します。
repeat	Number	リピート回数を設定します。0を設定した場合は1回、1を設定した場合は2回動作します。デフォルト：`Infinity`
shuffle	Boolean	`text` プロパティに設定した配列？の値をランダムで出力します。デフォルト:`false`
initialAction	String	開始時に空で始まるか、入力された状態で始まるを設定できます。デフォルト:`typing` 種類：`typing` \|\| `erasing`
preTypeDelay	Number	最初の文字を入力する前に待機するミリ秒。デフォルト:`70`
typeDelay	Number	文字を入力してから次の文字が入力されるまで待機するミリ秒。デフォルト:`70`
preEraseDelay	Number	文字列が完全に入力された後、最初の消去アクション（バックスペース、ハイライトなど）が実行されるまで待機するミリ秒。デフォルト:`2000`
eraseDelay	Number	文字列が完全に入力された後、最初の消去アクション（バックスペース、ハイライトなど）が実行されるまで待機するミリ秒。デフォルト:`250`
eraseStyle	String	文字を消去する際のアクション設定です。デフォルト:`select-all`種類：`backspace` \|\| `select-back` \|\| `select-all` \|\| `clearbackspace` バックスペースキーをシミュレートして、一度に1文字を消去します。 `select-back` Shift + LeftArrowをシミュレートして、一度に1文字後方を強調表示し、すべての文字が強調表示されるとすべてを消去します。 `select-all` Ctrl / Cmd + Aをシミュレートして、すぐにすべての文字を一度に強調表示し、その後すべての文字を消去します。 `clear`すぐにすべての文字を一度に消去します。入力した文字列は単に消えます。
eraseOnComplete	Boolean	すべての入力が完了した後、最後に入力した文字列は消去されず、表示されたままになります。デフォルト:`false`
caretAnimation	String	SublimeおよびVS Codeアニメーションと同様に、使用する組み込みキャレットアニメーションを指定します。デフォルト:`blink`種類：`solid` \|\| `blink` \|\| `smooth` \|\| `phase` \|\| `expand`

さいごに

タイピングをしてるかのようにテキストを表示するVue.js用のコンポーネントライブラリでした。

ポートフォリオとかランディングページとかで使えそうな感じです。
最近自社のホームページリニューアルのディレクターをやってるので、これを試してみようかな？

今日はこの辺でー