vue-waving-text

Component to display waving text for Vue.

Demo

Go to demo.

Installation

Bundler (Webpack, Rollup...)

yarn add vue-waving-text

Or

npm install --save vue-waving-text

Register

Global

import WavingText from 'vue-waving-text';

Vue.component('WavingText', WavingText);

Local

import WavingText from 'vue-waving-text';

Vue.extend({
  template: '...',
  components: {
    WavingText: WavingText
  }
});

Browser

Download vue and vue-waving-text or use a CDN like unpkg.

<script src="vue.js"></script>
<script src="vue-waving-text.umd.js"></script>
or
<script src="https://unpkg.com/vue-waving-text/dist/vue-waving-text.umd.js"></script>

Usage

With all props.

<WavingText
    text="Vue waving text!"
    duration="1.1"
    side="30"
    fontsize="56"
    textClass="myClass"
    fromcolor="white"
    tocolor="#95b0ad"
/>

Setup

Props

Parameter | Type | Default | Description --------- | ---- | ------- | ----------- text (required) | String | - | Text that waves. duration | String | 0.3 | Duration of animation in sec. side | String | 90 | translateY axis pixel value. fontsize | String | 50 | Fony size. fromcolor | white | 50 | Animation of text color, start value. Any vaild css color. tocolor | black | 50 | Animation of text color, end value.Any vaild css color. textClass | String | - | Class that apply to font.

License

The MIT License