vue-canvas-effect
A simple, canvas effect collection for Vue.js
🌾 online demo | 📘 中文文档
Contents
Browser support
 IE |
 Firefox |
 Chrome |
 Safari |
 iOS |
 Android |
|---|---|---|---|---|---|
| IE9+ | ✓ | ✓ | ✓ | ✓ | ✓ |
Installation
NPM
npm install vue-canvas-effect --saveUsage
ES6
On demand
Recommend ways First, install babel-plugin-import
npm install babel-plugin-import --save-devThen edit .babelrc
// .babelrc
{
"plugins": [["import", {
"libraryName": "vue-canvas-effect",
"libraryDirectory": "src/components"
}]]
}Next, if you need neon, edit main.js
import Vue from 'vue'
import {neon} from 'vue-canvas-effect';
Vue.component(neon.name, neon);
`or`
Vue.component('customName', neon);
new Vue({
el: '#app',
render: h => h(App)
})Fully import
no recommend ways
import Vue from 'vue'
import vueCanvas from 'vue-canvas-effect';
Vue.use(vueCanvas)
new Vue({
el: '#app',
render: h => h(App)
})normal use
script tag
<html>
<head>
...
</head>
<body>
<div id="app">
<neon-effect></neon-effect>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"></script>
<script src="../dist/neon.min.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>Component List
neon
name: neonEffect
// default tagName use
<neon-effect :options="options"></neon-effect>//default options
{
len: 20, //The unilateral length of the pentagon
count: 50, //How many lines overlap
rate: 20, //rate the smaller fast
dieChance: 0.05, //The chance to redraw a single painting failure.
sparkChance: 0.1, //[0,1] The larger the figure, the larger the pentagon.
sparkDist: 10, //Flash point distance.
sparkSize: 2,//Flash point size.
contentLight: 60, // [0,100] Brightness of color block
shadowToTimePropMult: 6, //The shadow size of the inner ring of the pentagon.
bgColorArr: [0, 0, 0] //Background color array
}bubbles
name: bubblesEffect
// default tagName use
<bubbles-effect :options="options"></bubbles-effect>//default options
{
color: 'rgba(225,225,225,0.5)', //Bubble color
radius: 15, //Bubble radius
densety: 0.3, // The larger the bubble density, the greater the density (suggest no more than 1).
clearOffset: 0.2 // The larger the bubble disappears [0-1], the longer it disappears.
}Changelog
See the GitHub release history.
Contribution
Welcome to give some Suggestions and optimizations, and look forward to your Pull Request.
TkS
License
vue-seamless-scroll is open source and released under the MIT License.