jak korzystać z particles.js?

Question

Nie mogę sprawić, żebym działał w particles.js - co dokładnie robię źle? Wszelkie spostrzeżenia będą mile widziane, nie mogę określić, czy błąd jest z powodu uzależnienia od zewnętrznego lub nie ...

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 
} 

Answer 1

Problem rozwiązany - Musiałem zrobić osobny plik JavaScript o nazwie app.js i umieścić w JSON że jako funkcja JS (zobacz jak zrobili swoje demo i bawić się z nim, aż można je robić co chcesz)