lindelof / particles-bg-vue

A vue.js particles animation background component

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

• https://github.com/lindelof/react-mouse-particles
• https://github.com/lindelof/power-mode-input

License

https://opensource.org/licenses/MIT

particles-bg-vue's Issues

any tried wavefroms?

try to make a waveform.. is that possible?

Add LICENSE file

It would be a good idea to add a LICENSE file with the appropriate license text. Package.json indicates MIT.

IE11 error

Hi there,

I've tried to implement this in my project and it works fine in Chrome but I just get "Syntax error" when I try to load the page in IE. Is this a known issue? Perhaps I need polyfills?

Which versions of vue are supported by the component?

Hello, there is no description of vue3 support in the documentation when using, is it only vue2 support?

help or bug Nuxt

Hi

i have read you post on nuxt dev.to
so i have 2 thinks:

1 - when i put mode: "universal" i got an error:

cannot use import statement outside a module vue

but when i change it to spa it's work , i see also that appear in your post , but maybe you have omit to mention this change.

2 . when i tried to implement with vuetify that don't work:

<template>
  <v-app class="app">
    <particles-bg type="circle" :bg="true" /> 
    <nuxt/>
  </v-app>
</template>

here my print screen

but with div instead of v-app work

---

step to reproduce

yarn create nuxt-app NuxtParticles
cd NuxtParticles
yarn add particles-bg-vue

add file plugins/particles.ts
with this content

import Vue from "vue";
import VueParticlesBg from "particles-bg-vue";

Vue.use(VueParticlesBg);

edit the file nuxt.config.js

mode: 'spa'
plugins: ["@/plugins/particles"],

edit file layouts/default.vue as:

<template>
  <v-app class="app">
    <particles-bg type="circle" :bg="true" /> 
    <nuxt/>
  </v-app>
</template>

can you advise

Thank you

Destroy method

Hi there, how do you destroy the instance of the particle generator when you navigate out? Maybe by implementing something in beforeDestroy()?

Thanks