vce

vue-canvas-effect

🎉 vue canvas动效库

Showing:

Popularity

Downloads/wk

30

GitHub Stars

110

Maintenance

Last Commit

4yrs ago

Contributors

1

Package

Dependencies

1

License

ISC

Type Definitions

Tree-Shakeable

No?

Readme

vue-canvas-effect

A simple, canvas effect collection for Vue.js

Build Status LICENSE MIT



logo of vue-canvas-effect repository

🌾 online demo | 📘 中文文档

## Contents

Browser support

IE
IE
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS Safari
iOS
Chrome for Android
Android
IE9+

Installation

NPM

npm install vue-canvas-effect --save

Usage

ES6

On demand

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)
})

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

// 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

// 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

circleMagic

License

vue-seamless-scroll is open source and released under the MIT License.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

tsp
tsparticlestsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
User Rating
5.0/ 5
6
Top Feedback
5Great Documentation
5Easy to Use
4Performant
GitHub Stars
3K
Weekly Downloads
31K
pv
particles.vuetsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
User Rating
5.0/ 5
2
Top Feedback
2Great Documentation
2Easy to Use
2Performant
GitHub Stars
3K
Weekly Downloads
848
vp
vue-particlesVue.js component for particles backgrounds
User Rating
1.0/ 5
2
Top Feedback
2Poor Documentation
2Hard to Use
2Slow
GitHub Stars
0
Weekly Downloads
3K
vtc
vue-transitions-cssA lightweight CSS library for adding transitions to Vue components :sparkles: :green_heart:
User RatingN/A
Top Feedback
N/A
GitHub Stars
28
Weekly Downloads
12
vpe
vue-particle-effect-buttonsA bursting particles effects buttons component ✨💥❄️🌋
User RatingN/A
Top Feedback
N/A
GitHub Stars
235
Weekly Downloads
11
See 7 Alternatives

Tutorials

No tutorials found
Add a tutorial