Skip to content
Permalink
Browse files

Add particle juice

  • Loading branch information...
CaliCastle committed Mar 11, 2019
1 parent 4f208cf commit bc46bc8f7b29562b442b6bbee54993cc7f0373e0
Showing with 143 additions and 1 deletion.
  1. +1 −0 package.json
  2. +1 −0 public/index.html
  3. +9 −0 public/particles.min.js
  4. +110 −0 src/assets/particles.json
  5. +14 −0 src/components/Particles.vue
  6. +3 −1 src/views/Home.vue
  7. +5 −0 yarn.lock
@@ -11,6 +11,7 @@
"gsap": "^2.1.2",
"paper": "^0.12.0",
"parallax-js": "^3.1.0",
"particles.js": "^2.0.0",
"simplex-noise": "^2.4.0",
"vue": "^2.6.6",
"vue-router": "^3.0.1"
@@ -29,6 +29,7 @@
<strong>We're sorry but Knife2MeatU doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script src="<%= BASE_URL %>particles.min.js"></script>
<!-- built files will be auto injected -->
</body>
</html>

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,110 @@
{
"particles": {
"number": {
"value": 120,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#f07c7c"
},
"shape": {
"type": "edge",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": true,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 4,
"random": true,
"anim": {
"enable": false,
"speed": 29.234779642848423,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 500,
"color": "#ffffff",
"opacity": 0.4,
"width": 2
},
"move": {
"enable": true,
"speed": 1,
"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": "bubble"
},
"onclick": {
"enable": true,
"mode": "repulse"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 0.5
}
},
"bubble": {
"distance": 400,
"size": 4,
"duration": 0.3,
"opacity": 1,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}
@@ -0,0 +1,14 @@
<template>
<div id="particles" class="fixed pin-t pin-l w-screen h-screen"></div>
</template>

<script>
import particles from '../assets/particles.json'
export default {
name: 'particles',
mounted() {
window.particlesJS('particles', particles)
}
}
</script>
@@ -3,16 +3,18 @@
<ComingSoon v-if="!ready" />
<main v-else></main>
<KnifeCursor />
<Particles />
</div>
</template>

<script>
import ComingSoon from '../components/ComingSoon'
import KnifeCursor from '../components/KnifeCursor'
import Particles from '../components/Particles'
export default {
name: 'home',
components: { ComingSoon, KnifeCursor },
components: { Particles, ComingSoon, KnifeCursor },
data() {
return {
ready: false
@@ -5687,6 +5687,11 @@ parseurl@~1.3.2:
resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
integrity sha1-/CidTtiZMRlGDBViUyYs3I3mW/M=

particles.js@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/particles.js/-/particles.js-2.0.0.tgz#21386c4328d6c7f96780a201e96eedfc09c736f6"
integrity sha1-IThsQyjWx/lngKIB6W7t/AnHNvY=

pascalcase@^0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"

0 comments on commit bc46bc8

Please sign in to comment.
You can’t perform that action at this time.