vue-real-wave
v1.0.4
Published
A wave effect for website base on vue.js | Vue.js波浪特效插件
Downloads
10
Readme
vue-real-wave 1.0.2
Wave effect plugin for Vue.js
Installation
- Install package via NPM
npm install vue-real-wave
- Install plugin within project
import VueRealWave from 'vue-real-wave'
or
const vueBaberrage = request('vue-baberrage');
Usage
- Template
<div id="app">
<VueRealWave wavePosition="bottom" :waveLayerCount="4" :space="80" :waveGap="100">
<div>
<h1>I am the content.</h1>
</div>
</VueRealWave>
...
</div>
- Already done
Just One step.
Plugin Options
waveGap
- Default: `150`
- Acceptable-Values: Number
- Function: The gap distance between two wave.
waveHeight
- Default: `40`
- Acceptable-Values: Number
- Function: The height of the wave.
waveLayerCount
- Default: `4`
- Acceptable-Values: Number
- Function: The layers number of the wave. ** Note that ** the size of the color's list must be equal with waveLayerCount.
waveColor
- Default: `['#40ccd4','#71d8df','rgba(256,256,256,.5)','rgba(256,256,256,1)']`
- Acceptable-Values: Array
- Function: The color's list of the wave. ** Note that ** the size of the color arrage must be equal with waveLayerCount.
waveBackgroundColor
- Default: `#0aaacb`
- Acceptable-Values: String
- Function: The Background color.
wavePosition
- Default: `bottom`
- Acceptable-Values: String
- Function: 'top' or 'bottom'. Determine the position of the wave of the content.
space
- Default: `50`
- Acceptable-Values: Number
- Function: The padding between with the nearest element.
Events
None.
Log
Version 0.0.1
- Realized the basic functionality.
Version 1.0.0
- Performance improvement.
Version 1.0.2
- Update README.md.