忘れないように記録しとこ

カバの樹

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

2019年8月29日

vue-textraとは

 

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

 

インストール

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

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製のライブラリでした。
仕事で使う機会はあまりなさそうですが、ポートフォリオなどに使うのは便利そうな気がします。

今日はこの辺でー

 

  • B!