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:
;;Vue;
This will make <VueParticle> component available to all components within your Vue app.
Local
Include the particle directly into your component using import:
;...components:VueParticle{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
- The "domId" which is the id of the element you want to use the particles on
- 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-particlejsexport 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