Issues using particles.js and fullpage.js?

568 views Asked by At

I am trying to build a single page site using the fullpage.js library which works great! I would also like to add the particle effect from particle.js library to the first section of my site.

No matter what I try, it seems the particles do not show up and I'm not to sure what the issue could be, any help is appreciated! My code is as follows:

HTML:

<div class="section" id="particles-js"></div>

JS:

particlesJS.load('particles-js', '/assets/particles.json', function() {
    console.log('callback - particles.js config loaded');
});

CSS:

#particles-js {
  background: cornflowerblue;
}

My particles.json file is the default one provided with the library as from here.

My JS code is in a file called init_libraries.js which is added to my HTML page like this:

<script src="/javascript/bootstrap.min.js"></script> 
<script src="/javascript/jquery.fullPage.min.js"></script> 
<script src="/javascript/particles.min.js"></script> 
<script src="/javascript/init_libraries.js"></script> 

When I start my site, I see "callback - particles.js config loaded" message so the library and the config file seem to be loaded fine but still I see no particle on my site. Any ideas?

EDIT:

Ended up figuring this one out after a while, I had to change my HTML like this:

<div id="particles-js">
     <canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;"></canvas>
</div> 

Also I had to add the following to CSS so that the particles were behind my text and button:

canvas {
    position: absolute; 
    top: 0; 
    z-index: 1;
}

.container a {
    position: relative;
    z-index: 9999;
}

.container h1 {
    position: relative;
    z-index: 9999;
}

Works great now! All the library js files were in the correct location.

1

There are 1 answers

1
oliverwebr On

I guess your assets are not in your javascript folder. Check if your relative path to your 'particles.json' is correct.

particlesJS.load('particles-js', '../assets/particles.json', function() {
   console.log('callback - particles.js config loaded');
});

Sorry can not comment :/