どうも、こうすけ（@kosuke_upd）です。
今回は、簡単にタイピングエフェクト (タイピングアニメーション) を実装できる Vue.js のライブラリ「VueTyper」を紹介し、その使い方を解説します。
タイピングエフェクトは実用性は特にないと思いますが、使い方次第で見た目がおしゃれになります。
すでにお気づきかもしれませんが、当ブログでもトップページのメインビジュアルでタイピングエフェクトを使用しています。
というわけで、VueTyer の使い方と、VueTyer を使用することでどんなタイピングエフェクトを実装できるのかということをお伝えしていきます。
VueTyper の使い方
準備: Vue.js のインストール
まず前提として、VueTyper を使用するには、Vue.js をインストールしている必要があります。もしまだ Vue.js をインストールしていない場合は、まず先に Vue.js をインストールしておきましょう。
もし Vue.js のインストール方法がわからない場合は、下記公式ドキュメントのインストールページを参考にインストールしましょう。
参考 インストール – Vue.js手順1. VueTyper のインストール
では、VueTyper をインストールしましょう。npm で VueTyper をインストールする方法と、CDN で VueTyper を読み込む方法があるので、状況に応じて使い分けましょう。
npm でインストールする場合
npm でインストールする場合は、ターミナルで下記コマンドを実行し、VueTyper をインストールします。
$ npm install --save vue-typerCDN で読み込む場合
CDN で読み込む場合は、下記スクリプトを body 要素内に設置します。
<script src="https://unpkg.com/vue-typer/dist/vue-typer.min.js"></script>手順2. VueTyper をグローバルまたはローカルに登録する
インストールした VueTyper をグローバルまたはローカルに登録し、VueTyper コンポーネントを使えるようにしましょう。
ローカルに登録する場合
特定のコンポーネントでしか使用しないなど、一部でしか VueTyper を使用しない場合は、VueTyper コンポーネントをローカルに登録しましょう。
VueTyper を使用したいコンポーネントファイルに下記のように記述します。
import { VueTyper } from 'vue-typer'
export default {
components: {
VueTyper
},
...
}グローバルに登録する場合
グローバルに登録する場合は、エントリーポイント (main.js など) に下記のように記述しましょう。
import VueTyperPlugin from 'vue-typer'
Vue.use(VueTyperPlugin)CDN で VueTyper をインストールした場合
手順1にて、CDN で VueTyper をインストールした場合、下記のように記述して VueTyper をグローバルに登録する必要があります。
var VueTyperPlugin = window.VueTyper.default
Vue.use(VueTyperPlugin)手順3. VueTyper を使用する
準備はできましたので、使用したい箇所にて下記のように記述し、VueTyper を使用しましょう。
<vue-typer text="ここに表示させたいテキストを記述しよう！"></vue-typer>複数の文章を使いたい場合は、下記のように配列を使用します。また、text 属性を :text とします。
<vue-typer :text="['テキスト1', 'テキスト2', 'テキスト3']"></vue-typer>上記のものはあくまで VueTyper の基本形ですが、VueTyper には様々なオプションが用意されており、オプションを使うことで様々な表現を実現できます。
引き続き見ていきましょう。
VueTyper で実装できるタイピングエフェクトの種類
VueTyper には、様々なオプションが用意されており、複数文章を使用する際に順番をシャッフルにしたり、文字の削除エフェクトを変更したり、タイピングや削除のスピードやタイミングを変更したり、カーソルのエフェクトを変更したりできます。
実際に見たほうがわかりやすいと思い、簡単なデモを用意しました。ソースコードもあわせて用意してあるので、ぜひご覧ください。
参考 VueTyper – GitHubVueTyper のデモページでは、実際に動きを確認しながら作成できます。
とても便利なので、VueTyper を実装する場合は活用しましょう。
最後に
今回は、タイピングエフェクトを表現できる Vue.js ライブラリ「VueTyper」の紹介と使い方についてお伝えしました。
使い方次第ではありますが、うまく使うことで簡単におしゃれなサイトやブログ、アプリにすることができるので、もし気に入ったらぜひ使ってみてください。
他にもタイピングエフェクトを実装できる Vue.js ライブラリとして「vue-typed-js」というものがあります。こちらはオプションが豊富なので、ぜひあわせてご覧ください。
[Vue.js] タイピングアニメーションを実装する vue-typed-js の使い方
\ 記事が良かったらシェア！ /
