Search code examples
javascripttwitter-bootstrapparticles.js

Integrate particle.js and bootstrap

Trying to add particles.js effect to my main header, but it doesnt seem to work, and i cant find out why.
Tried to add class/id particles-js with no success. Heres my fiddle: https://jsfiddle.net/thek1d21/dtj0Lz3w/21/ Almost everytime i manage to find solutions on my own, but not this time.

Thanks.

My code: 

<!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>

CSS: 

.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;
}

JS:

$(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);
});
Solution

  • You just forgot to include jQuery and particles.js into the page: 

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>

    https://jsfiddle.net/2g56xcty/1/