Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lindelof/particles-bg-vue

A vue.js particles animation background component
https://github.com/lindelof/particles-bg-vue

particle-bg particles particles-bg vue-background vue-particle vue-particle-background vue-particles vue-resume vuejs-particles

Last synced: 4 months ago
JSON representation

A vue.js particles animation background component

Host: GitHub
URL: https://github.com/lindelof/particles-bg-vue
Owner: lindelof
License: mit
Created: 2019-11-28T12:33:14.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2021-03-20T03:25:31.000Z (almost 4 years ago)
Last Synced: 2024-10-01T15:08:32.802Z (5 months ago)
Topics: particle-bg, particles, particles-bg, vue-background, vue-particle, vue-particle-background, vue-particles, vue-resume, vuejs-particles
Language: Vue
Homepage: https://codesandbox.io/s/particles-bg-vue-bg145
Size: 599 KB
Stars: 231
Watchers: 6
Forks: 17
Open Issues: 3
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-web-cn - particles-bg-vue - 一个粒子动画背景组件 (Uncategorized / Uncategorized)
awesome-web-effect - particles-bg-vue - A vue.js particles animation background component. Use it to make your website look cool. (🚀 A series of exquisite and compact web page cool effects / Background Decoration)
fucking-awesome-web-effect - particles-bg-vue - A vue.js particles animation background component. Use it to make your website look cool. (🚀 A series of exquisite and compact web page cool effects / Background Decoration)

README

        


  



# particles-bg-vue

[![NPM](https://img.shields.io/npm/v/particles-bg-vue.svg)](https://www.npmjs.com/package/particles-bg-vue) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

> 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](https://github.com/lindelof/particles-bg)

## Specify

This project refers to the source code of the [Proton](https://drawcall.github.io/Proton/) official website, and proton's online [demo](https://codesandbox.io/s/proton-tadpole-yt6qu?fontsize=14&module=%2Fsrc%2Fcomponents%2FParticles.vue). I packaged it into a vue.js component. Thanks to the great author.

### Online demo

* demo1 [https://codesandbox.io/s/particles-bg-vue-bg145](https://codesandbox.io/s/particles-bg-vue-bg145)

* demo2 [https://codesandbox.io/s/particles-bg-vue-qc1b5](https://codesandbox.io/s/particles-bg-vue-qc1b5)

* custom [https://codesandbox.io/s/particles-bg-vue-2fkvr](https://codesandbox.io/s/particles-bg-vue-2fkvr)

![](https://github.com/lindelof/particles-bg-vue/blob/master/images/01.jpg?raw=true)

![](https://github.com/lindelof/particles-bg-vue/blob/master/images/02.jpg?raw=true)

![](https://github.com/lindelof/particles-bg-vue/blob/master/images/03.jpg?raw=true)

![](https://github.com/lindelof/particles-bg-vue/blob/master/images/04.jpg?raw=true)

![](https://github.com/lindelof/particles-bg-vue/blob/master/images/05.jpg?raw=true)

![](https://github.com/lindelof/particles-bg-vue/blob/master/images/06.jpg?raw=true)

![](https://github.com/lindelof/particles-bg-vue/blob/master/images/07.jpg?raw=true)

## Install

```bash

npm install --save particles-bg-vue

```

## Usage

### Method 1: Import and use in the component

```vue

...

import { ParticlesBg } from "particles-bg-vue";

export default {

  name: "App",

  components: {

    ParticlesBg

  }

};

```

### Method 2: Use it globally

```vue

import VueParticlesBg from "particles-bg-vue";

Vue.use(VueParticlesBg);

....

```

## Parameter Description

```vue

```

#### * 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`.

```js

"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

```vue

:canvas="canvasObject"

...

```

#### * bg - Set to html background

Is set the following properties

```css

position: "absolute",

zIndex: -1,

top: 0,

left: 0

```

## About Custom

![](https://github.com/lindelof/particles-bg-vue/blob/master/images/08.jpg?raw=true)

You can use type="custom" to achieve a higher degree of freedom for the particle background.

```vue

  

  ...

  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/react-mouse-particles)

* [https://github.com/lindelof/power-mode-input](https://github.com/lindelof/power-mode-input)

## License

https://opensource.org/licenses/MIT