Vue Typerとは

タイピングアニメーションを簡単に実装できるVue.jsのライブラリです。

おしゃれーな感じになります。
それではやってみましょう。

Vue Typerのインストール

今回の記事はCode Penを利用するのでCDNで読み込みます。

npmでインストール

npm

% npm install --save vue-typer

yarnでインストール

yarn

% yarn add vue-typer

CDNで読み込み

CDN

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

Vue Typerコンポーネントを使えるようにする

ローカルに登録する場合

特定のコンポーネントでしか使わないよという場合はローカルに登録します。
Vue Typerを使いたいファイルに記述します。

ローカル

import { VueTyper } from 'vue-typer'

export default {
  components: {
    VueTyper
  },
  ...
}

グローバルに登録する場合

あまりないかもしれませんがグローバルに登録する場合は
エントリーポイントに記述します。

グローバル

import VueTyperPlugin from 'vue-typer'
Vue.use(VueTyperPlugin)

CDNで読み込んだ場合

グローバルに登録します。

CDN

var VueTyperPlugin = window.VueTyper.default
Vue.use(VueTyperPlugin)

Vue Typer使い方

vue-typerタグを設置します。

<vue-typer text="表示させたいテキスト"></vue-typer>

配列も使えます。その場合は:textとします。

html

<vue-typer :text="['テキスト1', 'テキスト2', 'テキスト3']"></vue-typer>

dataプロパティから情報を取り出すことももちろんできます。

html

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

javascript

const VueTyperPlugin = window.VueTyper.default
Vue.use(VueTyperPlugin)

new Vue({
  el: '#app',
  data: {
    text: 'Hello World!'
  }
});

textプロパティは必須です。

See the Pen Vue Typer1 by morioka (@rm5912) on CodePen.

Vue Typerのプロパティ

Vue Typerはさまざまなエフェクトを使うことができます。

入力のプロパティ

プロパティ名	型	説明
text	String,Array	文字列もしくは配列で値を設定（必須）
repeat	Number	リピート回数を設定。0の場合は１回。デフォルトはinfinity(リピート）
shuffle	Boolean	textプロパティ、配列に設定した値をランダムで出色。デフォルトはfalse
initalAction	String	開始時に空で始まるか、入力された状態で始まるかを設定。typingまたはerasingで設定。デフォルトはtyping
preTypeDelay	Number	最初の文字を入力する前に待機するミリ秒。　デフォルトは70
typeDelay	Number	文字を入力してから次の文字が入力されるまで待機するミリ秒。デフォルトは70
caretAnimation	String	カーソルのアニメーションを指定する。デフォルトは　blink
caretAnimation="solid"		名前の通り。特にアニメーションなし
caretAnimation="blink"		普通のカーソルの感じ
caretAnimation="smooth"		blinkよりも少し早くなり滑らかな印象
caretAnimation="phase"		smoothよりも早くなりチカチカした印象
caretAnimation="expand"		伸びたり縮んだりする

消去のプロパティ

プロパティ名	型	説明
preEraseDelay	Number	文字列が完全に入力された後、最初の消去アクション（バックスペース、ハイライトなど）が実行されるまで待機するミリ秒。デフォルトは2000
eraseDelay	Number	文字列が完全に入力された後、最初の消去アクション（バックスペース、ハイライトなど）が実行されるまで待機するミリ秒。デフォルトは250
eraseStyle	String	文字を消去する際のアクション
eraseStyle="backspace"		バックスペースで１文字ずつ消去する
eraseStyle="select-back"		1文字ずつ強調表示して全ての文字が強調表示されると全てを消去
eraseStyle="select-all"		全ての文字を強調表示してすぐに全ての文字を消去
eraseStyle="clear"		すぐに全ての文字を消去
eraseOnComplete	Boolean	全ての文字が入力を完了した後、最後に入力された文字は消去されず、表示されたままに。デフォルトはfalse

CSSで遊ぶ

Vue typerはクラスが用意されていてCSSで遊ぶこともできます。

CSS

SCSS */ /* SCSS
.vue-typer {
  /* vue-typerコンテナのスタイル
     例: font-family, font-size

  .custom.char {
    /* 各文字用のスタイル
       例: color, background-color

    &.typed {
      タイプされた文字に固有のスタイル
         キャレットの左にある文字
    }
    &.selected {
      選択された文字に固有のスタイル
         VueTyperの'eraseStyle'が選択ベースのスタイルに設定されている間のキャレットの右側の文字
              'eraseStyle'が選択ベースのスタイルに設定されている場合
    }
    &.erased {.
      消した文字に固有のスタイル
         VueTyperの'eraseStyle'が選択ベースのスタイルに設定されている間は、キャレットの右にある文字を消去する。
              'eraseStyle'が非選択ベースのスタイルに設定されている場合
    }
  }

  .custom.caret {
    キャレットのスタイル
       例：背景色、アニメーション、表示 }

    &.pre-type{
      タイプ前のアイドル状態のキャレットのスタイル
         文字列が入力される前、'preTypeDelay'の間
    }
    &.pre-erase {
      キャレットが消去される前にアイドル状態にあるときのスタイル
         すなわち、'preEraseDelay'の間、文字列が消去される前の状態} 
    }
    &.idle {
      キャレットがアイドル状態で、VueTyperがまだ入力を完了していない場合のスタイル
         すなわち、'pre-type'または'pre-erase'が設定されていて、'complete'が設定されていない場合
    }
    &.typing {
      VueTyperがタイピングしている間のキャレットのスタイル 
    }
    &.selecting { { /* VueTyperが選択している間のキャレットのスタイル
      /* VueTyperが選択しているときのキャレットのスタイル
         すなわち、キャレットが後方に移動し、'eraseStyle'が選択ベースのスタイルに設定されている場合
    }
    &.erasing {
      /* VueTyperが消去している間のキャレットのスタイル
         キャレットが後方に移動し、'eraseStyle'が非選択ベースのスタイルに設定されている場合
    }
    &.complete {.
      VueTyperが全ての入力/消去を終了した時のアイドル状態のキャレットのスタイル
    }
  }
}

ざっと翻訳しただけなのでみづらいところはご了承ください。
文字を変えるだけでとてもおしゃれに。。。

See the Pen Vue Typer2 by morioka (@rm5912) on CodePen.

終わりに

Webページにアクセントとして入れると動きが出るのでいいなと思いました。
ぜひ皆さんも遊んでみてください。

参考サイト
VueTyper Demo
カバの樹　タイピングのようなテキストアニメーションを「VueTyper」で実装する
 Qiita ポートフォリオで使おうと思ったVueTyperについて
 UPDATE 【Vue.js】タイピングエフェクトを実装する「VueTyper」の使い方

 VueTyper GitHub