0.3.0 • Published 5 years ago
vue-waving-text v0.3.0
vue-waving-text
Component to display waving text for Vue.
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. |