Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to use particles.js?

I can't seem to get particles.js working--what exactly am I doing wrong? Any insights would be appreciated, I can't determine if the error is due to an external dependency or not...

HTML:

<div id = "particles-js"></div>

<!-- particles -->
<script src = "particles.js-master/particles.min.js"></script>

CSS:

/* ---- particles.js container ---- */

#particles-js{
  width: 100%;
  background-color: #3284BF;
  background-image: url('');
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

Javascript:

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'particles.js-master/particles.json', function() {
  console.log('callback - particles.js config loaded');
});

JSON

{
  "particles": {
    "number": {
      "value": 100,
      "density": {
        "enable": true,
        "value_area": 1500
      }
    },
    "color": {
      "value": "#ffb300"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 1,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 3.945738208161363,
      "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": 3,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 1200,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "grab"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 200,
        "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
}
like image 736
Jay Avatar asked Sep 03 '15 07:09

Jay


People also ask

How does particle JS work?

Particles. js is a lightweight JavaScript library used for creating particles which looks likes the vertices of polygon. We can also interact by hovering over the particles and create more particles by clicking on particles.


Video Answer


1 Answers

Problem solved--I needed to make a separate javascript file called app.js and put the JSON in that as a JS function (see how they did their demo and fiddle around with it till you can make it do what you want)

like image 197
Jay Avatar answered Oct 09 '22 16:10

Jay