Neutral, Plus or Minus

    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

    Keywords

    none

    Install

    npm i vue-particlejs

    DownloadsWeekly Downloads

    24

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    41.4 kB

    Total Files

    9

    Last publish

    Collaborators

    • adedayojs