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