How to keep the particles.js interaction while below other elements

5.8k Views Asked by Elrond At 25 October 2017 at 13:36

I am using particle.js as a background. I have managed to place on the background with use of z-index. I tried a suggestion on the github isseus page. The z-index and this:

"interactivity": {
    "detect_on": "canvas",

This bit was already added in the default particle configuration.

The problem is similar as: this question. He said he solved it but looking at his codepen link it doesnt seem the same. There is no content above the the particles.

Mine current build: Github PROBLEM = the interactivity works just above the first content box and just below it. I have tried multiple edits with the width of elements and z-index. Also tried using a extra div for the other content.

How can I get the interactivity to work on the sides?

Original Q&A

There are 2 best solutions below

Atish Shakya On 05 January 2018 at 18:01

Try this in your html

<div id="particles-js" style="position:fixed;width:100%;z-index:-10;"></div>

Also if you want interactive controls while particles are in the background

set interactivity to window instead of canvas in particles.json file

"interactivity": {
"detect_on": "window",

edindubai On 09 October 2018 at 17:15

I exported from this codepen initially

And then I changed his css:

canvas {
width: 100%;
height:100%;
}

h1{
margin: 0 auto;
text-align: center;
width: 100%;
font-size: 2rem;
padding-top: 20rem;
font-weight: 200;
z-index: 2;
}

#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-colour: #000000;
z-index: -1 !important; 
}

In the html:

<body>
<div id="particles-js"></div>
<h1> My text for my overlay title </h1>

In the index.js around line 73 of the export change the "detect_on" part from canvas to window regarding interactivity:

"detect_on": "window",

working example of above

There is another codepen set and working demo solving the same issue here other working code example but you get to see less of the other options to edit where I changed dots to stars etc.

How to keep the particles.js interaction while below other elements

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in PARTICLE.JS

Trending Questions

Popular # Hahtags

Popular Questions