❤
npm
Sign UpSign In

vue-particlejs

1.1.0 • Public • Published

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

key option type / notes example
particles.number.value number 50
particles.number.density.enable boolean true / false
particles.number.density.value_area number 750
particles.color.value HEX (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.type string
array selection		 "circle"
"edge"
"triangle"
"polygon"
"star"
"image"
["circle", "triangle", "image"]
particles.shape.stroke.width number 2
particles.shape.stroke.color HEX (string) "#222222"
particles.shape.polygon.nb_slides number 5
particles.shape.image.src path link
svg / png / gif / jpg		 "assets/img/yop.svg"
"http://mywebsite.com/assets/img/yop.png"
particles.shape.image.width number
(for aspect ratio)		 100
particles.shape.image.height number
(for aspect ratio)		 100
particles.opacity.value number (0 to 1) 0.75
particles.opacity.random boolean true / false
particles.opacity.anim.enable boolean true / false
particles.opacity.anim.speed number 3
particles.opacity.anim.opacity_min number (0 to 1) 0.25
particles.opacity.anim.sync boolean true / false
particles.size.value number 20
particles.size.random boolean true / false
particles.size.anim.enable boolean true / false
particles.size.anim.speed number 3
particles.size.anim.size_min number 0.25
particles.size.anim.sync boolean true / false
particles.line_linked.enable boolean true / false
particles.line_linked.distance number 150
particles.line_linked.color HEX (string) #ffffff
particles.line_linked.opacity number (0 to 1) 0.5
particles.line_linked.width number 1.5
particles.move.enable boolean true / false
particles.move.speed number 4
particles.move.direction string "none"
"top"
"top-right"
"right"
"bottom-right"
"bottom"
"bottom-left"
"left"
"top-left"
particles.move.random boolean true / false
particles.move.straight boolean true / false
particles.move.out_mode string
(out of canvas)		 "out"
"bounce"
particles.move.bounce boolean
(between particles)		 true / false
particles.move.attract.enable boolean true / false
particles.move.attract.rotateX number 3000
particles.move.attract.rotateY number 1500
interactivity.detect_on string "canvas", "window"
interactivity.events.onhover.enable boolean true / false
interactivity.events.onhover.mode string
array selection		 "grab"
"bubble"
"repulse"
["grab", "bubble"]
interactivity.events.onclick.enable boolean true / false
interactivity.events.onclick.mode string
array selection		 "push"
"remove"
"bubble"
"repulse"
["push", "repulse"]
interactivity.events.resize boolean true / false
interactivity.events.modes.grab.distance number 100
interactivity.events.modes.grab.line_linked.opacity number (0 to 1) 0.75
interactivity.events.modes.bubble.distance number 100
interactivity.events.modes.bubble.size number 40
interactivity.events.modes.bubble.duration number
(second)		 0.4
interactivity.events.modes.repulse.distance number 200
interactivity.events.modes.repulse.duration number
(second)		 1.2
interactivity.events.modes.push.particles_nb number 4
interactivity.events.modes.push.particles_nb number 4
retina_detect boolean true / 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

Readme

Keywords

none

Package Sidebar

Install

npm i vue-particlejs

Repository

github.com/adedayojs/vue-particlejs

Homepage

github.com/adedayojs/vue-particlejs#readme

Weekly Downloads

29

Version

1.1.0

License

MIT

Unpacked Size

41.4 kB

Total Files

9

Last publish

Collaborators

  • adedayojs
Try on RunKit
Report malware