粒子不是从particles.js生成

我一直在试图将particles.js实现到我的网站，但是没有生成粒子。所以我从github page下载了演示，并刚刚打开index.html，但它仍然不会生成粒子。可能是什么问题？如果我去sample site，那里产生的粒子非常好。粒子不是从particles.js生成

下面是index.html的：

<body> 
    <div id="particles-js"></div> 
    <!-- Hero --> 
    <div class="hero"> 
    <ul class="fly-in-header hidden"> 
     <li>TIRTH </li> 
     <li>THE </li> 
     <li>ARTIST</li> 
    </ul> 
    <b1> 
     <a href="photography.html"><button type="button" id="main-button" class="btn btn-outline-secondary">photography</button></a> 

     <a href="projects.html"><button type="button" id="main-button" class="btn btn-outline-secondary">projects</button></a> 
    </b1> 
    </div> 

    <!-- jQuery first, then Tether, then Bootstrap JS. --> 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> 
    <script src="js/particles.js"></script> 
    <script src="js/apps.js"></script> 
    <script type="text/javascript"> 
    $(function() { 
     setTimeout(function() { 
     $('.hero > .fly-in-header').removeClass('hidden'); 
     }, 500); 
    })(); 

    </script> 
</body>

apps.js：

particlesJS.load('particles-js', 
{ 
    "particles": { 
    "number": { 
     "value": 80, 
     "density": { 
     "enable": true, 
     "value_area": 800 
     } 
    }, 
    "color": { 
     "value": "#000000" 
    }, 
    "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": "#000000", 
     "opacity": 0.4, 
     "width": 1 
    }, 
    "move": { 
     "enable": true, 
     "speed": 6, 
     "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": "repulse" 
     }, 
     "onclick": { 
     "enable": false, 
     "mode": "push" 
     }, 
     "resize": true 
    }, 
    "modes": { 
     "grab": { 
     "distance": 400, 
     "line_linked": { 
      "opacity": 1 
     } 
     }, 
     "bubble": { 
     "distance": 400, 
     "size": 40, 
     "duration": 2, 
     "opacity": 8, 
     "speed": 3 
     }, 
     "repulse": { 
     "distance": 100, 
     "duration": 0.4 
     }, 
     "push": { 
     "particles_nb": 4 
     }, 
     "remove": { 
     "particles_nb": 2 
     } 
    } 
    }, 
    "retina_detect": true 
} 

);

来源

2017-07-31 Tirth Rami

你好，Tirth。没有更多细节，我们无法帮助您。你有什么尝试？你能收集任何类似的错误，并用它增加你的问题吗？你应该总是考虑到需要为其他人提出的问题，以便能够研究答案并尝试帮助你 –

那么我的代码与github页面显示的格式完全相同。我也观看了YouTube视频，我的实施也没有什么不同。我甚至从github下载了示例项目，并打开了示例项目中包含的页面，但它仍然无效。主机端可能有问题吗？ @ D.Melo –

问题应该包括必要的信息，包括相关的代码。到其他网站的超链接不计算在内。你有没有检查控制台的错误？ – trincot

通过使用本地主机而不是打开该文件解决它。

来源

2017-08-02 01:31:25

粒子不是从particles.js生成

回答

相关问题