Javascript 集成particle.js和bootstrap_Javascript_Twitter Bootstrap_Particles.js

Javascript 集成particle.js和bootstrap

javascript twitter-bootstrap

Javascript 集成particle.js和bootstrap,javascript,twitter-bootstrap,particles.js,Javascript,Twitter Bootstrap,Particles.js,正在尝试将particles.js效果添加到我的主标题中，但它似乎不起作用，我也找不到原因。尝试向js添加类/id粒子，但未成功。这是我的小提琴：几乎每次我都能自己找到解决方案，但这次不行谢谢我的代码： <!DOCTYPE html> <html lang="en"> <head> </head> <body>  <div id="par

正在尝试将particles.js效果添加到我的主标题中，但它似乎不起作用，我也找不到原因。
尝试向js添加类/id粒子，但未成功。这是我的小提琴：几乎每次我都能自己找到解决方案，但这次不行

谢谢

我的代码：

<!DOCTYPE html>
<html lang="en">

  <head>

  </head>

  <body>
    <!---Page Header-->
    <div id="particles-js">
      <div class="section section-shaped light-blue">
        <div class="page-header">
          <div class="row">
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

JS:

您只是忘记了将jQuery和particles.js包含在页面中：

等等，什么？！我现在觉得自己很愚蠢。谢谢你，伙计。

.section {
  position: relative;
  overflow: hidden;
}

.section-shaped {
  position: relative;
  overflow: hidden;
}

.page-header {
  min-height: 75vh;
  max-height: 999px;
  padding: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.light-blue {
  background-color: rgba(28, 206, 234, 0.82);
  background-image: linear-gradient(-45deg, rgba(147, 26, 222, 0.83) 0%, rgba(28, 206, 234, 0.82) 100%);
}



#particles-js {
  height: 100%;
}

#particles-js>p {
  position: absolute;
  top: 100px;
}

$(function() {
  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": "repulse"
        },
        "onclick": {
          "enable": true,
          "mode": "push"
        },
        "resize": true
      },
      "modes": {
        "grab": {
          "distance": 400,
          "line_linked": {
            "opacity": 1
          }
        },
        "bubble": {
          "distance": 400,
          "size": 40,
          "duration": 2,
          "opacity": 4,
          "speed": 3
        },
        "repulse": {
          "distance": 200,
          "duration": 0.4
        },
        "push": {
          "particles_nb": 4
        },
        "remove": {
          "particles_nb": 2
        }
      }
    },
    "retina_detect": true
  });
  var update;
  update = function() {
    if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {}
    requestAnimationFrame(update);
  };
  requestAnimationFrame(update);
});