无法添加particle.js

Question

我正在尝试创建一个由三页组成的滚动网页

 $('a.page-scroll').on('click', function(event) { var $anchor = $(this); $('html, body').stop().animate({ scrollTop: $($anchor.attr('href')).offset().top - 60 }, 1000); event.preventDefault(); });

 * { margin-top: 0; margin-bottom: 0; } #page1 { height: 1000px; background-color: #000; color: white; } #page2 { height: 1000px; color: white; background-color: #18121e; padding-top: 140px; border-top: 100px; } #page3 { height: 650px; color: white; background-color: #233237; background-size: cover; padding-top: 200px; } body { padding-top: 0px; } #page1 p { padding-top: 100px; font-size: 2.5rem; } #page1 p #highlight { color: pink !important; } #page2 h3 { padding-bottom: 80px; line-height: 1.5; } #page3 h3 { padding-bottom: 100px; line-height: 1.5; } .btn { color: white; background-color: #000 !important; } .btn:hover { color: gray; } @media screen and (max-width: 990px) { .btn ~ .btn { margin-top: 10px; } }

 <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.7/jquery.nicescroll.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Rashid Naushad</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a class="page-scroll" href="#about">About</a></li> <li><a class="page-scroll" href="#portfolio">Portfolio</a></li> <li><a class="page-scroll" href="#contact">Contact</a></li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <!--<div class="container-fluid">--> <div> <div id="page1"> <div id="particles-js"> <a id="about"></a> <br> <br> <br> <p class="text-center">Hi ! <br>I'm a self taught web developer based in India. <br> I'm an undergraduate student pursuing economics who just loves to <span id="highlight">code</span>. <br> I dream of combining my knowledge of programming, economics, and <br>financial markets for the betterment of the society. <br> Languages and Frameworks: <br> HTML5, CSS3, Bootstrap3, <br> Javascript, jQuery, Angular.js, Meteor.js, <br> Node.js, React,js, <br> Python, php.. <br> Tools & expertise: Git, Responsive Web Design.</p> </div> </div> <div id="page2"> <a id="portfolio"></a> <h3 class="text-center">Here is my latest portfolio, <br>I'll be adding more as I learn and grow..</h3> <!--<div class="row"> <div class="thumbnail img img-responsive"> <p data-height="268" data-theme-id="0" data-slug-hash="VaKMBJ" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen <a href="http://codepen.io/rashidnaushad/pen/VaKMBJ/">Simple Javascript App</a> by Rashid Naushad (<a href="http://codepen.io/rashidnaushad">@rashidnaushad</a>) on <a href="http://codepen.io">CodePen</a>.</p> <script async src="//assets.codepen.io/assets/embed/ei.js"></script> </div> <div class="thumbnail img img-responsive"> <p data-height="268" data-theme-id="0" data-slug-hash="pyPjae" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen <a href="http://codepen.io/rashidnaushad/pen/pyPjae/">Tribute to Raghuram Rajan</a> by Rashid Naushad (<a href="http://codepen.io/rashidnaushad">@rashidnaushad</a>) on <a href="http://codepen.io">CodePen</a>.</p> <script async src="//assets.codepen.io/assets/embed/ei.js"></script> </div> </div> <div class="row"> <div class="thumbnail"> <img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" /> <div class="caption"> <h5 class="text-center">Coming Soon!</h5> </div> </div> <div class="thumbnail"> <img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" /> <div class="caption"> <h5 class="text-center">Coming Soon!</h5> </div> </div> </div>--> </div> <div id="page3"> <a id="contact"></a> <h3 id="contact-text" class="text-center">Think I can be of any help to you?<br>Wanna collaborate?<br>Shoot me a message, now!</h3> <a href="https://github.com/rashidnaushad" class="btn btn-lg col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2" target="_blank">GitHub</a> <div class="hidden-lg hidden-md"> <br> </div> <a href="https://www.freecodecamp.com/rashidnaushad" class="btn btn-lg col-lg-2 col-lg-offset-1 col-md-2 col-md-offset-1 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2" target="_blank">freeCodeCamp</a> <div class="hidden-lg hidden-md"> <br> </div> <a href="mailto:rashidnaushad3@gmail.com" class="btn btn-lg col-lg-2 col-lg-offset-1 col-md-2 col-md-offset-1 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2" target="_blank">Gmail</a> </div> </div>

我想补充的背景涵盖particles.js第一页。我试图做中所描述的GitHub的particles.js ，但悲惨地失败了。 我到底哪里错了？ 这是JSFiddle 。

Answer 1

在您的jsfiddle您从未真正调用过particles 方法。 此外，位于粒子顶部的文本需要绝对定位；

这是您的工作功能示例

注意particles-js需要初始化和配置，这里是我用的：

particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "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": "#ffffff",
      "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": "grab"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 140,
        "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
});