lindelof / Particles Bg Vue
Licence: mit
A vue.js particles animation background component
Stars: ✭ 133
Projects that are alternatives of or similar to Particles Bg Vue
Particleeffectsbuttons
A little library that can be used for bursting particles effects on buttons and other elements
Stars: ✭ 1,122 (+743.61%)
Mutual labels: particles
Bloom
🎉An android library that display bloom effect for view.
Stars: ✭ 106 (-20.3%)
Mutual labels: particles
Profugus
A set of radiation transport mini-applications used for performance optimization on HPC systems.
Stars: ✭ 23 (-82.71%)
Mutual labels: particles
Awesome Canvas
A curated list of awesome HTML5 Canvas with examples, related articles and posts.
Stars: ✭ 963 (+624.06%)
Mutual labels: particles
Flutter particle clock
The Grand Prize-winning entry of the #FlutterClock challenge.
Stars: ✭ 771 (+479.7%)
Mutual labels: particles
Gadgetsmenu
Feature-rich cosmetics plugin that provide players with the most powerful features.
Stars: ✭ 40 (-69.92%)
Mutual labels: particles
Particles
A particle simulation engine based on a port of d3-force
Stars: ✭ 104 (-21.8%)
Mutual labels: particles
Particles.js
A lightweight, dependency-free and responsive javascript plugin for particle backgrounds.
Stars: ✭ 1,336 (+904.51%)
Mutual labels: particles
Korge
KorGE Game Engine. Multiplatform Kotlin Game Engine
Stars: ✭ 780 (+486.47%)
Mutual labels: particles
Zame Haxe Particles
Particle emitter for OpenFL compatible with Particle Designer
Stars: ✭ 74 (-44.36%)
Mutual labels: particles
Phaser3 Particle Editor
A flexible editor for building phaser particles.
Stars: ✭ 131 (-1.5%)
Mutual labels: particles
React Particle Effect Button
Bursting particle effect buttons for React 🎉
Stars: ✭ 1,385 (+941.35%)
Mutual labels: particles
particles-bg-vue
A vue.js particles animation background component. Use it to make your website look cool.
Check it out if you want to use it in React https://github.com/lindelof/particles-bg
Specify
This project refers to the source code of the Proton official website, and proton's online demo. I packaged it into a vue.js component. Thanks to the great author.
Online demo
- demo1 https://codesandbox.io/s/particles-bg-vue-bg145
- demo2 https://codesandbox.io/s/particles-bg-vue-qc1b5
- custom https://codesandbox.io/s/particles-bg-vue-2fkvr
Install
npm install --save particles-bg-vue
Usage
Method 1: Import and use in the component
<particles-bg type="lines" :bg="true" />
...
import { ParticlesBg } from "particles-bg-vue";
export default {
name: "App",
components: {
ParticlesBg
}
};
Method 2: Use it globally
import VueParticlesBg from "particles-bg-vue";
Vue.use(VueParticlesBg);
....
<particles-bg type="random" :bg="true" />
Parameter Description
<particles-bg color="#ff0000" num=200 type="circle" :bg={true} />
* type - Is the type of particle animation
Is the type of particle animation, random is a random selection. You are also free to customize use custom.
"color"
"ball"
"lines"
"thick"
"circle"
"cobweb"
"polygon"
"square"
"tadpole"
"fountain"
"random"
"custom"
* num - The number of particles emitted each time, generally not set
* color - The background color or particle color of the particle scene
Notice: which should be an array under type=color
* canvas - canvas dom style
:canvas="canvasObject"
...
* bg - Set to html background
Is set the following properties
position: "absolute",
zIndex: -1,
top: 0,
left: 0
About Custom
You can use type="custom" to achieve a higher degree of freedom for the particle background.
<particles-bg type="custom" :config="config" :bg="true"/>
...
data: function() {
return {
config: {
num: [4, 7],
rps: 0.1,
radius: [5, 40],
life: [1.5, 3],
v: [2, 3],
tha: [-30, 30],
body: icon,
alpha: [0.6, 0],
scale: [0.1, 0.4],
position: "all",
cross: "dead",
random: 15
}
};
}
Similar projects
Maybe you will like these two projects, they will also make your page flourish
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].