テキストをスライドさせるライブラリ「vue-textra」の使い方

vue-textraとは

 

vue-textraはテキストをスライドさせるVue.js製のライブラリです。
テキストのスライドに9種のアニメーションを付加することができます。

 

インストール

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

npm

npm i -D vue-textra

CDN

<script src='https://cdn.jsdelivr.net/npm/vue-textra@latest/dist/textra.min.js'></script>

 

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

https://github.com/hosein2398/Textra

 

導入手順

テキストのスライドを実装します。

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

（1）webpack等の場合 ※モジュール版は未検証です。

import {Textra} from 'vue-textra'

（2）WEBページの場合

const Textra  = window.Textra;

2.メソッドを設定

Vue.use(Textra);

let app = new Vue({
  el: '#app',
  data: {
    filterType: ['simple','bottom-top','top-bottom','right-left','left-right','press','scale','flash','flip'],
    selectFilter: 'flash',
    words: ['カバの樹','モモの樹','ミカンの樹','リンゴの樹']
  }
})

3. <textra>テンプレートを準備

<div id="app">
  <select v-model="selectFilter">
    <option v-for="type in filterType" >{{type}}</option>
  </select>　
  <textra :data='words' :timer="1.5"　:infinite="true" :filter="selectFilter" />
</div>

 

サンプル

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

 

プロパティ

Prop	説明	type
data	スライドさせたいものの配列である必要があります。	Array
timer	各スライド間のギャップを秒として定義します。	Number
filter	スライドするときに使用するフィルターのタイプを定義します。 simple bottom-top top-bottom right-left left-right press scale flash flip	String
infinite	スライダーをループさせるかどうかを定義します。	Boolean

 

さいごに

テキストをスライドさせるVue.js製のライブラリでした。
仕事で使う機会はあまりなさそうですが、ポートフォリオなどに使うのは便利そうな気がします。

今日はこの辺でー