github.com/chenxuan0000/vue-canvas-effect
A simple, canvas effect collection for Vue.js
🌾 online demo | 📘 中文文档
 IE |  Firefox |  Chrome |  Safari |  iOS |  Android |
|---|---|---|---|---|---|
| IE9+ | ✓ | ✓ | ✓ | ✓ | ✓ |
npm install vue-canvas-effect --save
Recommend ways First, install babel-plugin-import
npm install babel-plugin-import --save-dev
Then 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.
FAQs
Unknown package
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.