A simple, canvas effect collection for Vue.js
🌾 online demo | 📘 中文文档
 IE |  Firefox |  Chrome |  Safari |  iOS |  Android |
|---|---|---|---|---|---|
| IE9+ | ✓ | ✓ | ✓ | ✓ | ✓ |
npm install vue-canvas-effect --saveRecommend 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) })no recommend ways
import Vue from 'vue' import vueCanvas from 'vue-canvas-effect'; Vue.use(vueCanvas) new Vue({ el: '#app', render: h => h(App) })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>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 }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. }See the GitHub release history.
Welcome to give some Suggestions and optimizations, and look forward to your Pull Request.
vue-seamless-scroll is open source and released under the MIT License.