diff --git a/README.md b/README.md
index 0ec9f401..0d9ecd3b 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
### SSR compatible - Tested with Nuxt.js
------------------------------
-
+
## Demo and Usage
http://vue-particles.netlify.com/
diff --git a/index.html b/index.html
index 7631718e..e45907fb 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
- Vue-Particles - Vue.js and particles.js component
+ Vue-Particles - Vue.js and tsParticles component
diff --git a/package.json b/package.json
index 8646dfd1..36a85133 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
"vue-component",
"particles.js",
"particles",
+ "tsparticles",
"vue-particles"
],
"scripts": {
@@ -27,7 +28,7 @@
"main": "src/vue-particles/index.js",
"dependencies": {
"vue": "^2.2.6",
- "particles.js": "^2.0.0"
+ "tsparticles": "^1.5.6"
},
"devDependencies": {
"autoprefixer": "^6.7.2",
diff --git a/src/vue-particles/particles-data.js b/src/vue-particles/particles-data.js
index 3d8ed9f8..ad37a69d 100644
--- a/src/vue-particles/particles-data.js
+++ b/src/vue-particles/particles-data.js
@@ -1,123 +1,135 @@
const particlesData = {
- "particles": {
- "number": {
- "value": 80,
- "density": {
- "enable": true,
- "value_area": 800
- }
- },
- "color": {
- "value": "#9E9E9E"
- },
- "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": 2,
- "direction": "none",
- "random": false,
- "straight": false,
- "out_mode": "out",
- "attract": {
- "enable": false,
- "rotateX": 600,
- "rotateY": 1200
- }
+ fps_limit: 60,
+ interactivity: {
+ detect_on: 'canvas',
+ events: {
+ onclick: {
+ enable: true,
+ mode: 'push'
+ },
+ onhover: {
+ enable: true,
+ mode: 'grab',
+ parallax: {
+ enable: false,
+ force: 2,
+ smooth: 10
}
+ },
+ resize: true
},
- "interactivity": {
- "detect_on": "canvas",
- "events": {
- "onhover": {
- "enable": true,
- "mode": "grab"
- },
- "onclick": {
- "enable": true,
- "mode": "push"
- },
- "resize": true
- },
- "modes": {
- "grab": {
- "distance": 100,
- "line_linked": {
- "opacity": 1
- }
- },
- "bubble": {
- "distance": 400,
- "size": 40,
- "duration": 2,
- "opacity": 8,
- "speed": 3
- },
- "repulse": {
- "distance": 200
- },
- "push": {
- "particles_nb": 4
- },
- "remove": {
- "particles_nb": 2
- }
+ modes: {
+ bubble: {
+ distance: 200,
+ duration: 0.4,
+ opacity: 1,
+ size: 80
+ },
+ grab: {
+ distance: 100,
+ line_linked: {
+ opacity: 1
}
+ },
+ push: {
+ particles_nb: 4
+ },
+ remove: {
+ particles_nb: 2
+ },
+ repulse: {
+ distance: 200,
+ duration: 0.4
+ }
+ }
+ },
+ particles: {
+ color: {
+ value: '#fff'
},
-
- "retina_detect": true,
- "config_demo": {
- "hide_card": false,
- "background_color": "#b61924",
- "background_image": "",
- "background_position": "50% 50%",
- "background_repeat": "no-repeat",
- "background_size": "cover"
+ line_linked: {
+ color: '#fff',
+ distance: 100,
+ enable: true,
+ opacity: 1,
+ width: 1
+ },
+ move: {
+ attract: {
+ enable: false,
+ rotateX: 3000,
+ rotateY: 3000
+ },
+ bounce: false,
+ direction: 'none',
+ enable: true,
+ out_mode: 'out',
+ random: false,
+ speed: 2,
+ straight: false
+ },
+ number: {
+ density: {
+ enable: true,
+ value_area: 800
+ },
+ value: 400
+ },
+ opacity: {
+ anim: {
+ enable: false,
+ opacity_min: 0,
+ speed: 2,
+ sync: false
+ },
+ random: false,
+ value: 1
+ },
+ shape: {
+ character: {
+ fill: false,
+ font: 'Verdana',
+ style: '',
+ value: '*',
+ weight: '400'
+ },
+ image: {
+ height: 100,
+ replace_color: true,
+ src: '',
+ width: 100
+ },
+ polygon: {
+ nb_sides: 5
+ },
+ stroke: {
+ color: '#ff0000',
+ width: 0
+ },
+ type: 'circle'
+ },
+ size: {
+ anim: {
+ enable: false,
+ size_min: 0,
+ speed: 20,
+ sync: false
+ },
+ random: false,
+ value: 20
}
+ },
+ retina_detect: false,
+ config_demo: {
+ hide_card: false,
+ background_color: '#b61924',
+ background_image: '',
+ background_position: '50% 50%',
+ background_repeat: 'no-repeat',
+ background_size: 'cover'
+ }
}
-
export {
particlesData
-}
\ No newline at end of file
+}
diff --git a/src/vue-particles/vue-particles.vue b/src/vue-particles/vue-particles.vue
index aa54ea15..52c235ab 100644
--- a/src/vue-particles/vue-particles.vue
+++ b/src/vue-particles/vue-particles.vue
@@ -91,10 +91,10 @@
}
},
mounted () {
- // import particle.js only on client-side
- require('particles.js')
+ // import tsParticles only on client-side
+ require('tsparticles');
this.$nextTick(() => {
- this.initParticleJS(
+ this.initTsParticles(
this.color,
this.particleOpacity,
this.particlesNumber,
@@ -131,118 +131,165 @@
clickEffect,
clickMode
) {
- particlesJS(this.id, {
- "particles": {
- "number": {
- "value": particlesNumber,
- "density": {
- "enable": true,
- "value_area": 800
- }
- },
- "color": {
- "value": color
- },
- "shape": {
- // circle, edge, triangle, polygon, star, image
- "type": shapeType,
- "stroke": {
- "width": 0,
- "color": "#192231"
+ this.initTsParticles(
+ color,
+ particleOpacity,
+ particlesNumber,
+ shapeType,
+ particleSize,
+ linesColor,
+ linesWidth,
+ lineLinked,
+ lineOpacity,
+ linesDistance,
+ moveSpeed,
+ hoverEffect,
+ hoverMode,
+ clickEffect,
+ clickMode
+ );
+ },
+ initTsParticles: function (
+ color,
+ particleOpacity,
+ particlesNumber,
+ shapeType,
+ particleSize,
+ linesColor,
+ linesWidth,
+ lineLinked,
+ lineOpacity,
+ linesDistance,
+ moveSpeed,
+ hoverEffect,
+ hoverMode,
+ clickEffect,
+ clickMode
+ ) {
+ tsParticles.load(this.id, {
+ fps_limit: 60,
+ interactivity: {
+ detect_on: 'canvas',
+ events: {
+ onclick: {
+ enable: clickEffect,
+ mode: clickMode,
+ },
+ onhover: {
+ enable: hoverEffect,
+ mode: hoverMode,
+ parallax: {
+ enable: false,
+ force: 2,
+ smooth: 10,
+ },
+ },
+ resize: true,
+ },
+ modes: {
+ bubble: {
+ distance: 200,
+ duration: 0.4,
+ opacity: 1,
+ size: 80,
+ },
+ grab: {
+ distance: 100,
+ line_linked: {
+ opacity: 1,
+ },
+ },
+ push: {
+ particles_nb: 4,
+ },
+ remove: {
+ particles_nb: 2,
+ },
+ repulse: {
+ distance: 200,
+ duration: 0.4,
+ },
},
- "polygon": {
- "nb_sides": 5
- }
- },
- "opacity": {
- "value": particleOpacity,
- "random": false,
- "anim": {
- "enable": false,
- "speed": 1,
- "opacity_min": 0.1,
- "sync": false
- }
- },
- "size": {
- "value": particleSize,
- "random": true,
- "anim": {
- "enable": false,
- "speed": 40,
- "size_min": 0.1,
- "sync": false
- }
- },
- "line_linked": {
- "enable": lineLinked,
- "distance": linesDistance,
- "color": linesColor,
- "opacity": lineOpacity,
- "width": linesWidth
},
- "move": {
- "enable": true,
- "speed": moveSpeed,
- "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": hoverEffect,
- "mode": hoverMode
+ particles: {
+ color: {
+ value: color,
},
- "onclick": {
- "enable": clickEffect,
- "mode": clickMode
+ line_linked: {
+ enable: lineLinked,
+ distance: linesDistance,
+ color: linesColor,
+ opacity: lineOpacity,
+ width: linesWidth
},
- "onresize": {
-
- "enable": true,
- "density_auto": true,
- "density_area": 400
-
- }
- },
- "modes": {
- "grab": {
- "distance": 140,
- "line_linked": {
- "opacity": 1
- }
+ move: {
+ attract: {
+ enable: false,
+ rotateX: 3000,
+ rotateY: 3000,
+ },
+ bounce: false,
+ direction: 'none',
+ enable: true,
+ out_mode: 'out',
+ random: false,
+ speed: moveSpeed,
+ straight: false,
+ },
+ number: {
+ density: {
+ enable: true,
+ value_area: 800,
+ },
+ value: particlesNumber,
},
- "bubble": {
- "distance": 400,
- "size": 40,
- "duration": 2,
- "opacity": 8,
- "speed": 3
+ opacity: {
+ anim: {
+ enable: false,
+ opacity_min: 0.1,
+ speed: 1,
+ sync: false,
+ },
+ random: false,
+ value: particleOpacity,
},
- "repulse": {
- "distance": 200,
- "duration": 0.4
+ shape: {
+ character: {
+ fill: false,
+ font: "Verdana",
+ style: "",
+ value: "*",
+ weight: "400",
+ },
+ image: {
+ height: 100,
+ replace_color: true,
+ src: "",
+ width: 100,
+ },
+ polygon: {
+ nb_sides: 5,
+ },
+ stroke: {
+ color: "#ff0000",
+ width: 0,
+ },
+ type: shapeType,
},
- "push": {
- "particles_nb": 4
+ size: {
+ anim: {
+ enable: false,
+ size_min: 0.1,
+ speed: 40,
+ sync: false,
+ },
+ random: true,
+ value: particleSize,
},
- "remove": {
- "particles_nb": 2
- }
- }
- },
- "retina_detect": true
- });
+ },
+ retina_detect: false,
+ }
+ );
}
}