Vue.jsでタイピングアニメーションを実装する「vue-typed-js」

vue-typed-jsとは

vue-typed-jsは、任意の文字でタイピングアニメーションを実装するコンポーネントライブラリです。

入力速度や開始速度をミリ秒単位で設定することが可能です。

またタイピングのアニメーションを変更することが可能です。

【動画サイズ：11KB】

環境

インストール

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

npm

npm install --save vue-typed-js

UMD

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-typed-js@0.1.2/dist/vue-typed-js.css">
<script src="https://cdn.jsdelivr.net/npm/vue-typed-js@0.1.2/dist/vue-typed-js.browser.js"></script>

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

導入手順

step.2 メソッドを設定

Vue.use(VueTypedJs);
new Vue({
  el: '#app', 
});

step.3 テンプレートを準備

各種コンポーネントを設置します。

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

<div id="app">
  <vue-typed-js :strings="['First text', 'Second Text']" :loop="true" :type-speed="100">
    <h1 class="typing"></h1>
  </vue-typed-js>
</div>

サンプル

さいごに

Webページ上の注釈を作成およびアニメーション化するコンポーネントライブラリでした。

今日はこの辺でー