CODEWITHSUNDEEP
javascripthtmlcssfullpage.jsparticles
serengeti
serengeti

Reputation: 117

Trying to setup full screen particle.js with fullPage.js

I wanted the particles.js to appear all over the screen in the first section, but whatever I do, they are under other parts of the page. I added the particles in second section. It seems to me this is through the use of fullPage.js(Alvaro Trigo, cant post more than 2 links, sry). I'm attaching my website and I'd like someone to take a look at this. unlikemenow.github.io Thanks :)

Upvotes: 1

Views: 946

Answers (1)

user4158347
user4158347

Reputation:

So first off, try putting the particles-jsclass on a <canvas> element instead of a <div>.

That means your first section will be wrapped in the <div class = "section"> like you already have, with the direct child being <canvas class = "particles-js">. Give that <canvas> a unique id like <canvas id = "the-particles" class = "particles-js">.

In CSS, assign a Z-Index to the #theParticles ID. Then set a Z-Index on your .section class. Make sure that the Z-Index on the <canvas> is higher than the <div>. I haven'ted tested this myself, so if it doesn't work, let me know, I can code through it for you. I've also never worked with particles-js before but it looks super cool!

Upvotes: 1

Related Questions