vp
vue-particlejs
npm i vue-particlejs
vp

vue-particlejs

by Adedayojs

1.1.0 (see all)License:MITTypeScript:Not Found
npm i vue-particlejs
Readme

Vue ParticleJs

A lightweight Vue library for creating particles. (Based On particles.js).

Feel free to submit issues and feature requests here.

Full documentation and examples

Table of Contents

Installation

npm install vue-particlejs

or if you prefer yarn

yarn add vue-particlejs

Importation

Vue ParticleJs can be imported using two methods

Global

You may install Vue Particle globally:

import Vue from 'vue';
import VueParticle from 'vue-particlejs';

Vue.use(VueParticle);

This will make <VueParticle> component available to all components within your Vue app.

Local

Include the particle directly into your component using import:

import VueParticle from 'vue-particlejs';

export default {
  ...
  components: {
    VueParticle
  },
  data: function() {
    return {}
  }
}

Usage

Once the VueParticle components is imported into your app globally or imported, it can be used in templates in the following manner:

  • Note The component takes two props
  1. The "domId" which is the id of the element you want to use the particles on
  2. The config Object more details here
<template>
  <div id="app">
  <div id='particle'></div>
    <VueParticle domId='particle' :config=particleConfig/>
    /* Place other components where you like*/
  </div>
</template>

<script>
import VueParticle from 'vue-particlejs

export default {
  name: "app",
  components: {
    VueParticle,
  },
  data: function() {
    return {
        particleConfig:{
        particles: {
          number: { value: 80, density: { enable: true, value_area: 800 } },
          color: { value: "#ffffff" },
          shape: {
            type: "circle",
            stroke: { width: 0, color: "#000000" },
            polygon: { nb_sides: 5 },
            image: { src: "img/github.svg", width: 100, height: 100 }
          },
          opacity: {
            value: 0.5,
            random: false,
            anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false }
          },
          size: {
            value: 3,
            random: true,
            anim: { enable: false, speed: 40, size_min: 0.1, sync: false }
          },
          line_linked: {
            enable: true,
            distance: 150,
            color: "#ffffff",
            opacity: 0.4,
            width: 1
          },
          move: {
            enable: true,
            speed: 6,
            direction: "none",
            random: false,
            straight: false,
            out_mode: "out",
            bounce: false,
            attract: { enable: false, rotateX: 600, rotateY: 1200 }
          }
        },
        interactivity: {
          detect_on: "canvas",
          events: {
            onhover: { enable: true, mode: "repulse" },
            onclick: { enable: true, mode: "push" },
            resize: true
          },
          modes: {
            grab: { distance: 400, line_linked: { opacity: 1 } },
            bubble: {
              distance: 400,
              size: 40,
              duration: 2,
              opacity: 8,
              speed: 3
            },
            repulse: { distance: 200, duration: 0.4 },
            push: { particles_nb: 4 },
            remove: { particles_nb: 2 }
          }
        },
        retina_detect: true
        }
            };
        }
};
  
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
}
</style>

  

Configuration

The second props which the vue particle component takes in is the configuration and there are rules to be followed. Since the VueParticle Component is just a wrapper around particlejs package, therefore all configuration options that apply to particlejs also applies to it

Options

keyoption type / notesexample
particles.number.valuenumber50
particles.number.density.enablebooleantrue / false
particles.number.density.value_areanumber750
particles.color.valueHEX (string)
RGB (object)
HSL (object)
array selection (HEX)
random (string)
"#b61924"
{r:182, g:25, b:36}
{h:356, s:76, l:41}
["#b61924", "#333333", "999999"]
"random"
particles.shape.typestring
array selection
"circle"
"edge"
"triangle"
"polygon"
"star"
"image"
["circle", "triangle", "image"]
particles.shape.stroke.widthnumber2
particles.shape.stroke.colorHEX (string)"#222222"
particles.shape.polygon.nb_slidesnumber5
particles.shape.image.srcpath link
svg / png / gif / jpg
"assets/img/yop.svg"
"http://mywebsite.com/assets/img/yop.png"
particles.shape.image.widthnumber
(for aspect ratio)
100
particles.shape.image.heightnumber
(for aspect ratio)
100
particles.opacity.valuenumber (0 to 1)0.75
particles.opacity.randombooleantrue / false
particles.opacity.anim.enablebooleantrue / false
particles.opacity.anim.speednumber3
particles.opacity.anim.opacity_minnumber (0 to 1)0.25
particles.opacity.anim.syncbooleantrue / false
particles.size.valuenumber20
particles.size.randombooleantrue / false
particles.size.anim.enablebooleantrue / false
particles.size.anim.speednumber3
particles.size.anim.size_minnumber0.25
particles.size.anim.syncbooleantrue / false
particles.line_linked.enablebooleantrue / false
particles.line_linked.distancenumber150
particles.line_linked.colorHEX (string)#ffffff
particles.line_linked.opacitynumber (0 to 1)0.5
particles.line_linked.widthnumber1.5
particles.move.enablebooleantrue / false
particles.move.speednumber4
particles.move.directionstring"none"
"top"
"top-right"
"right"
"bottom-right"
"bottom"
"bottom-left"
"left"
"top-left"
particles.move.randombooleantrue / false
particles.move.straightbooleantrue / false
particles.move.out_modestring
(out of canvas)
"out"
"bounce"
particles.move.bounceboolean
(between particles)
true / false
particles.move.attract.enablebooleantrue / false
particles.move.attract.rotateXnumber3000
particles.move.attract.rotateYnumber1500
interactivity.detect_onstring"canvas", "window"
interactivity.events.onhover.enablebooleantrue / false
interactivity.events.onhover.modestring
array selection
"grab"
"bubble"
"repulse"
["grab", "bubble"]
interactivity.events.onclick.enablebooleantrue / false
interactivity.events.onclick.modestring
array selection
"push"
"remove"
"bubble"
"repulse"
["push", "repulse"]
interactivity.events.resizebooleantrue / false
interactivity.events.modes.grab.distancenumber100
interactivity.events.modes.grab.line_linked.opacitynumber (0 to 1)0.75
interactivity.events.modes.bubble.distancenumber100
interactivity.events.modes.bubble.sizenumber40
interactivity.events.modes.bubble.durationnumber
(second)
0.4
interactivity.events.modes.repulse.distancenumber200
interactivity.events.modes.repulse.durationnumber
(second)
1.2
interactivity.events.modes.push.particles_nbnumber4
interactivity.events.modes.push.particles_nbnumber4
retina_detectbooleantrue / false

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

The Particle has to be configured in the same manner as you configure particle.js if you are familiar with it.


Acknowledgement

This Whole package is made possible because of Particles.js Created by Vincent Garreau

Downloads/wk

51

GitHub Stars

14

LAST COMMIT

3yrs ago

MAINTAINERS

1

CONTRIBUTORS

2

OPEN ISSUES

1

OPEN PRs

9
VersionTagPublished
1.1.0
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate