https://github.com/dreambo8563/vue-particle-effect-buttons
A bursting particles effects buttons component ✨💥❄️🌋
https://github.com/dreambo8563/vue-particle-effect-buttons
animations anime buttons particles vue
Last synced: about 1 month ago
JSON representation
A bursting particles effects buttons component ✨💥❄️🌋
- Host: GitHub
- URL: https://github.com/dreambo8563/vue-particle-effect-buttons
- Owner: dreambo8563
- License: mit
- Created: 2019-04-24T03:33:59.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-22T04:42:39.000Z (7 months ago)
- Last Synced: 2025-04-01T09:32:01.012Z (about 1 month ago)
- Topics: animations, anime, buttons, particles, vue
- Language: HTML
- Homepage: https://dreambo8563.github.io/vue-particle-effect-buttons/
- Size: 5.53 MB
- Stars: 263
- Watchers: 2
- Forks: 23
- Open Issues: 38
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- fucking-awesome-web-effect - vue-particle-buttons - A bursting particles effects buttons component (🚀 A series of exquisite and compact web page cool effects / Button Effect)
- awesome-web-effect - vue-particle-buttons - A bursting particles effects buttons component (🚀 A series of exquisite and compact web page cool effects / Button Effect)
README
# vue-particle-effect-buttons ([demo](https://dreambo8563.github.io/vue-particle-effect-buttons/))
[](#contributors)
[](https://app.codacy.com/app/dreambo8563/vue-particle-effect-buttons?utm_source=github.com&utm_medium=referral&utm_content=dreambo8563/vue-particle-effect-buttons&utm_campaign=Badge_Grade_Dashboard)
[](https://greenkeeper.io/)
[](https://travis-ci.org/dreambo8563/vue-particle-effect-buttons)
[](https://snyk.io/test/github/dreambo8563/vue-particle-effect-buttons?targetFile=package.json)
[](https://opensource.org/licenses/MIT)
> Bursting particle effect buttons for Vue.
This library is a Vue portal of an awesome [Codrops Article](https://tympanus.net/codrops/2018/04/25/particle-effects-for-buttons/) by [Luis Manuel](https://tympanus.net/codrops/author/luis/) (original [source](https://github.com/codrops/ParticleEffectsButtons/)).
## Install
```bash
npm install --save animejs vue-particle-effect-buttons
```
## Usage
Check out the [Demo](https://dreambo8563.github.io/vue-particle-effect-buttons/) to see it in action.
```js
hello eveybody!
animating:{{btnOps.animating}}
visible:{{btnOps.visible}}
toggle
import ParticleEffectButton from "vue-particle-effect-buttons"
export default {
data() {
return {
btnOps: {
type: "triangle",
easing: "easeOutQuart",
size: 6,
particlesAmountCoefficient: 4,
oscillationCoefficient: 2,
color: function () {
return Math.random() < 0.5 ? "#000000" : "#ffffff";
},
onComplete: () => {
console.log("complete");
},
onBegin: () => {
console.log("begin");
},
visible: true,
animating: false
},
}
},
components: {
ParticleEffectButton
}
};
```
Note that `children` can be anything, The `children` should represent the button's contents.
You change the `visible` boolean prop to kick-off an animation, typically as a result of a click on the button's contents. If `visible` changes to `false`, the button will perform a disintegrating animation. If `visible` changes to `true`, it will reverse and reintegrate the original content.
## Props
| Property | Type | Default | Description |
| :--------------------------- | :------------------ | :--------------- | :--------------------------------------------------------------------------------------------------------- |
| `visible` | boolean | true | Whether button should be hidden or visible. Changing this prop starts an animation. support .sync modifier |
| `animating` | boolean | false | Get the current status of animating or end of the animation. support .sync modifier | |
| `cls` | string/Object/Arrar | noop | The class to change the default button styles |
| `duration` | number | 1000 | Animation duration in milliseconds. |
| `easing` | string | 'easeInOutCubic' | Animation easing. |
| `type` | string | circle | 'circle' or 'rectangle' or 'triangle' |
| `style` | string | fill | 'fill' or 'stroke' |
| `direction` | string | 'left' | 'left' or 'right' or 'top' or 'bottom' |
| `canvasPadding` | number | 150 | Amount of extra padding to add to the canvas since the animation will overflow the content's bounds |
| `size` | number | func | random(4) | Particle size. May be a static number or a function which returns numbers. |
| `speed` | number | func | random(4) | Particle speed. May be a static number or a function which returns numbers. |
| `particlesAmountCoefficient` | number | 3 | Increases or decreases the relative number of particles |
| `oscillationCoefficient` | number | 20 | Increases or decreases the relative curvature of particles |
| `onBegin` | func | noop | Callback to be notified once an animation starts. |
| `onComplete` | func | noop | Callback to be notified once an animation completes. |
I tried to keep the properties exactly the same as in the original codrops version.
## Slots
| Property | Type | Default | Description |
| :-------- | :--- | :---------------------- | :------------------------ |
| `default` | slot | the string of 'content' | the content of the button |
## Related
- [anime.js](http://animejs.com/) - Underlying animation engine.
- [ParticleEffectsButtons](https://github.com/codrops/ParticleEffectsButtons/) - Original source this library is based on.
- [Codrops Article](https://tympanus.net/codrops/2018/04/25/particle-effects-for-buttons/) - Original article this library is based on.
## Contributors
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
