├── .babelrc ├── .eslintignore ├── .gitignore ├── .npmignore ├── LICENSE.md ├── README.md ├── package.json ├── src ├── components │ └── VueParticle.vue └── main.js ├── webpack.config.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ] 10 | } -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | .DS_Store 23 | node_modules 24 | npm-debug.log 25 | .vscode 26 | .coveralls.yml 27 | dist/build.js 28 | dist/build.js.map 29 | test/unit/coverage 30 | yarn-debug.log* 31 | yarn-error.log* 32 | .idea -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adedayojs/vue-particlejs/af2851806c62b130b43b6c6f989b51b72c833fd6/.npmignore -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015, Vincent Garreau 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Vue ParticleJs 3 | 4 | 5 | ### A lightweight Vue library for creating particles. (Based On particles.js). 6 | 7 | 8 | **Feel free to submit issues and feature requests [here](https://github.com/adedayojs/vue-particlejs/issues)**. 9 | 10 | 11 | **[Full documentation and examples](https://github.com/adedayojs/vue-particlejs/)** 12 | 13 | ## Table of Contents 14 | - [Live Demonstration](#demonstration) 15 | - [Installation](#installation) 16 | - [Importation](#importation) 17 | - [Usage](#usage) 18 | - [Development](#development) 19 | - [License](#license) 20 | 21 | ## Demonstration 22 | The live demonstration of the project in codesandbox can be viewed [Here](https://codesandbox.io/s/vue-template-v9i0r) 23 | 24 | ## Installation 25 | 26 | ``` bash 27 | npm install vue-particlejs 28 | ``` 29 | 30 | or if you prefer yarn 31 | 32 | ``` bash 33 | yarn add vue-particlejs 34 | ``` 35 | 36 | ## Importation 37 | 38 | Vue ParticleJs can be imported using two methods 39 | - [Globally](#global) 40 | - [Locally](#local) 41 | 42 | ### Global 43 | 44 | You may install Vue Particle globally: 45 | 46 | ``` js 47 | import Vue from 'vue'; 48 | import VueParticle from 'vue-particlejs'; 49 | 50 | Vue.use(VueParticle); 51 | ``` 52 | This will make **<VueParticle>** component available to all components within your Vue app. 53 | 54 | ### Local 55 | 56 | Include the particle directly into your component using import: 57 | 58 | ``` js 59 | import VueParticle from 'vue-particlejs'; 60 | 61 | export default { 62 | ... 63 | components: { 64 | VueParticle 65 | }, 66 | data: function() { 67 | return {} 68 | } 69 | } 70 | ``` 71 | 72 | ## Usage 73 | 74 | Once the **VueParticle** components is imported into your app globally or imported, it can be used in templates in the following manner: 75 | 76 | * Note 77 | 78 | The component takes two props 79 | 1. The "domId" which is the id of the element you want to use the particles on 80 | 2. The config Object [more details here](#configuration) 81 | 82 | ``` vue 83 | 90 | 91 | 167 | 168 | 178 | 179 | 180 | ``` 181 | 182 | 183 | ### Configuration 184 | The second props which the vue particle component takes in is the configuration and there are rules to be followed. Since 185 | the VueParticle Component is just a wrapper around **[particlejs](https://github.com/VincentGarreau/particles.js)** package, therefore all configuration options that apply to particlejs also applies to it 186 | ### `Options` 187 | 188 | key | option type / notes | example 189 | ----|---------|------ 190 | `particles.number.value` | number | `50` 191 | `particles.number.density.enable` | boolean | `true` / `false` 192 | `particles.number.density.value_area` | number | `750` 193 | `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"` 194 | `particles.shape.type` | string
array selection | `"circle"`
`"edge"`
`"triangle"`
`"polygon"`
`"star"`
`"image"`
`["circle", "triangle", "image"]` 195 | `particles.shape.stroke.width` | number | `2` 196 | `particles.shape.stroke.color` | HEX (string) | `"#222222"` 197 | `particles.shape.polygon.nb_slides` | number | `5` 198 | `particles.shape.image.src` | path link
svg / png / gif / jpg | `"assets/img/yop.svg"`
`"http://mywebsite.com/assets/img/yop.png"` 199 | `particles.shape.image.width` | number
(for aspect ratio) | `100` 200 | `particles.shape.image.height` | number
(for aspect ratio) | `100` 201 | `particles.opacity.value` | number (0 to 1) | `0.75` 202 | `particles.opacity.random` | boolean | `true` / `false` 203 | `particles.opacity.anim.enable` | boolean | `true` / `false` 204 | `particles.opacity.anim.speed` | number | `3` 205 | `particles.opacity.anim.opacity_min` | number (0 to 1) | `0.25` 206 | `particles.opacity.anim.sync` | boolean | `true` / `false` 207 | `particles.size.value` | number | `20` 208 | `particles.size.random` | boolean | `true` / `false` 209 | `particles.size.anim.enable` | boolean | `true` / `false` 210 | `particles.size.anim.speed` | number | `3` 211 | `particles.size.anim.size_min` | number | `0.25` 212 | `particles.size.anim.sync` | boolean | `true` / `false` 213 | `particles.line_linked.enable` | boolean | `true` / `false` 214 | `particles.line_linked.distance` | number | `150` 215 | `particles.line_linked.color` | HEX (string) | `#ffffff` 216 | `particles.line_linked.opacity` | number (0 to 1) | `0.5` 217 | `particles.line_linked.width` | number | `1.5` 218 | `particles.move.enable` | boolean | `true` / `false` 219 | `particles.move.speed` | number | `4` 220 | `particles.move.direction` | string | `"none"`
`"top"`
`"top-right"`
`"right"`
`"bottom-right"`
`"bottom"`
`"bottom-left"`
`"left"`
`"top-left"` 221 | `particles.move.random` | boolean | `true` / `false` 222 | `particles.move.straight` | boolean | `true` / `false` 223 | `particles.move.out_mode` | string
(out of canvas) | `"out"`
`"bounce"` 224 | `particles.move.bounce` | boolean
(between particles) | `true` / `false` 225 | `particles.move.attract.enable` | boolean | `true` / `false` 226 | `particles.move.attract.rotateX` | number | `3000` 227 | `particles.move.attract.rotateY` | number | `1500` 228 | `interactivity.detect_on` | string | `"canvas", "window"` 229 | `interactivity.events.onhover.enable` | boolean | `true` / `false` 230 | `interactivity.events.onhover.mode` | string
array selection | `"grab"`
`"bubble"`
`"repulse"`
`["grab", "bubble"]` 231 | `interactivity.events.onclick.enable` | boolean | `true` / `false` 232 | `interactivity.events.onclick.mode` | string
array selection | `"push"`
`"remove"`
`"bubble"`
`"repulse"`
`["push", "repulse"]` 233 | `interactivity.events.resize` | boolean | `true` / `false` 234 | `interactivity.events.modes.grab.distance` | number | `100` 235 | `interactivity.events.modes.grab.line_linked.opacity` | number (0 to 1) | `0.75` 236 | `interactivity.events.modes.bubble.distance` | number | `100` 237 | `interactivity.events.modes.bubble.size` | number | `40` 238 | `interactivity.events.modes.bubble.duration` | number
(second) | `0.4` 239 | `interactivity.events.modes.repulse.distance` | number | `200` 240 | `interactivity.events.modes.repulse.duration` | number
(second) | `1.2` 241 | `interactivity.events.modes.push.particles_nb` | number | `4` 242 | `interactivity.events.modes.push.particles_nb` | number | `4` 243 | `retina_detect` | boolean | `true` / `false` 244 | 245 | ------------------------------- 246 | 247 | ## License 248 | 249 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details. 250 | 251 | The Particle has to be configured in the same manner as you configure particle.js if you are familiar with it. 252 | 253 | ------------------------------- 254 | 255 | ## Acknowledgement 256 | 257 | This Whole package is made possible because of [Particles.js](https://github.com/VincentGarreau/particles.js) Created by [Vincent Garreau](https://github.com/VincentGarreau/) 258 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-particlejs", 3 | "version": "1.1.0", 4 | "main": "src/main.js", 5 | "private": false, 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "webpack -p" 9 | }, 10 | "dependencies": { 11 | "vue": "^2.5.9", 12 | "particles.js": "^2.0.0" 13 | }, 14 | "devDependencies": { 15 | "babel-core": "^6.26.0", 16 | "babel-loader": "^7.1.2", 17 | "babel-preset-env": "^1.6.1", 18 | "cross-env": "^5.1.1", 19 | "css-loader": "^0.28.7", 20 | "file-loader": "^1.1.5", 21 | "node-sass": "^4.7.2", 22 | "sass-loader": "^6.0.6", 23 | "vue-loader": "^13.5.0", 24 | "vue-template-compiler": "^2.5.9", 25 | "webpack": "^3.10.0", 26 | "webpack-dev-server": ">=3.1.11" 27 | }, 28 | "license": "MIT", 29 | "eslintConfig": { 30 | "root": true, 31 | "env": { 32 | "node": true 33 | }, 34 | "extends": [ 35 | "plugin:vue/essential", 36 | "eslint:recommended" 37 | ], 38 | "rules": {}, 39 | "parserOptions": { 40 | "parser": "babel-eslint" 41 | } 42 | }, 43 | "postcss": { 44 | "plugins": { 45 | "autoprefixer": {} 46 | } 47 | }, 48 | "repository": { 49 | "url": "https://www.github.com/adedayojs/vue-particlejs" 50 | }, 51 | "author": { 52 | "name": "Adedayo Adedunye", 53 | "url": "https://www.facebook.com/adedayojs", 54 | "email": "samfeolu@gmail.com" 55 | }, 56 | "browserslist": [ 57 | "> 1%", 58 | "last 2 versions" 59 | ] 60 | } 61 | -------------------------------------------------------------------------------- /src/components/VueParticle.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 28 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import VueParticle from './components/VueParticle.vue' 2 | export default VueParticle -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/main.js', 6 | 7 | module: { 8 | rules: [ 9 | // use babel-loader for js files 10 | { test: /\.js$/, use: 'babel-loader' }, 11 | // use vue-loader for .vue files 12 | { test: /\.vue$/, use: 'vue-loader' } 13 | ] 14 | }, 15 | // default for pretty much every project 16 | context: __dirname, 17 | // specify your entry/main file 18 | output: { 19 | // specify your output directory... 20 | path: path.resolve(__dirname, './dist'), 21 | // and filename 22 | filename: 'VueParticle.js' 23 | } 24 | } 25 | 26 | 27 | 28 | if (process.env.NODE_ENV === 'production') { 29 | module.exports.devtool = '#source-map' 30 | module.exports.plugins = (module.exports.plugins || []).concat([ 31 | new webpack.DefinePlugin({ 32 | 'process.env': { 33 | NODE_ENV: '"production"' 34 | } 35 | }), 36 | new webpack.optimize.UglifyJsPlugin({ 37 | sourceMap: true, 38 | compress: { 39 | warnings: false 40 | } 41 | }), 42 | new webpack.LoaderOptionsPlugin({ 43 | minimize: true 44 | }) 45 | ]) 46 | } --------------------------------------------------------------------------------