Particles.js: Particle.js as background

[jdlopez7]

Hello! I want to use particles.js as background as they do on this page: http://www.mindvalley.com/vishen.html
To my web I am developing it with DIVI of ELEGANT THEMES.
Can you please help me? Thank you very much!

[LegitSoulja]

@jdlopez7 Sorry, but this should be very easy. Only thing it takes is some CSS knowledge. Position a container as full width/height.

A better approach, if your page is longer, you could use javascript and make the container the same height as the page content (If you had to scroll), leaving a bigger play/space.

[LegitSoulja]

@jdlopez7 I managed to do the exact same, http://legitsoulja.info/

This is all you should need

#particles canvas{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

<div id="particles"></div>

[jdlopez7]

Thank you very much for the reply!!! Sorry for ignorance, where should I put this code? In the plugin or in the CSS part of the wordpress section?

[LegitSoulja]

@jdlopez7 you would put this with CSS. I don't know much about Wordpress since I like to customly build sites :).

I'll see if I can find more info about it.

[jdlopez7]

Thank you so much for everything! You're a genius!

[LegitSoulja]

You may be using a plugin correct? Or could you link your site? Thanks.

[jdlopez7]

It's called Particle Background, take it from this page: http://vincentgarreau.com/particles.js/

[LegitSoulja]

@jdlopez7 so you manually installed this?

[LegitSoulja]

In that case, the div you added for the particles, assign it with the div id of what I have above.

[jdlopez7]

My problem is that particle background is above the images, photos, text and everything

[AnonymousNoob]

Try adding a

z-index : 999;

for your content . it must pop right above the particles.

for example,

<div class = 'myclass'>
<!--   all your other divs part of the web content (images,text,etc) -->
...
</div>
<div class="particle"></div>

try adding this:

.myclass{
z-index : 99999;
}

in your styles.

[LegitSoulja]

@AnonymousNoob

* { z-index: 2; }
.particle, .particle > canvas { z-index: 1 !important; }

[jdlopez7]

Hello! thank you very much. Where should I include this?

• {z-index: 2; }
  .particle, .particle> canvas {z-index: 1! important; }

El 15 sep. 2017, a las 16:24, ᦖєgιт [e-mail] escribió:

• { z-index: 2; }
  .particle, .particle > canvas { z-index: 1 !important; }

[Assisted-Suicide]

My website www.antetech.org Wont let me interact with it except for the very bottom? help?

[LegitSoulja]

@Assisted-Suicide you would want to disable pointer events on your div that is overlaying the interaction area.

[Assisted-Suicide]

@LegitSoulja When I do that, nothing works. it is not interactive at all

[stunningsagar]

I have put some other code on the body section and in the background I have put these particles.js but they are not interactive.Please help me out..?

[shaunjc]

I'm attempting to do the same thing for one of our clients.

Adding css for pointer events works in most browsers (but not all), your elements with hover or click events will no longer function, and it will prevent your content from being selectable.

section.particles-js .overlay {
    pointer-events: none;
}

You can re-add pointer events for those elements which need to have hover and click listeners, but it will prevent the particles from detecting events when you hover over those elements, and it can be a little awkward if you're unsure which items have hover or click events at the time of development, for instance when content editors add third party popups via a WYSIWYG editor (Users are dumb) rather then the nice input field we give them in the CMS.

section.particles-js .overlay a,
section.particles-js .overlay input,
section.particles-js .overlay button,
section.particles-js .overlay textarea,
section.particles-js .overlay label,
section.particles-js .overlay .has-tab-index-or-lack-thereof,
section.particles-js .overlay .has-hover-or-click-event-or-transition {
    pointer-events: all;
}

I've attempted adjusting the interactivity to 'window', but while the particles will react to the mouse, the location the interactivity occurs does not match the mouse position unless the top of the canvas is currently at the top of the screen.

I'll add a suggestion now for including an option for detecting the interactivity via the parent element. This would bypass the issues surrounding the overlays hindering interactivity, as long as they share the same parent.

[jinghao17]

why the effect drag down after i create content inside... this is not a background? how to make it as a background so that i can put some content inside... sorry i not good in css

[sirStephen]

Mehn I have been trying go make particles js to be interactive. I have no idea why it aint working .

[lakshyajit165]

Hello There! I wanted to know how do I change the color of the particles to black and background of the particles( or canvas ) to be white. Can u suggest the exact modifications to be done in the code? I tried many times but failed..
Thanks in Advance.

[LegitSoulja]

@lakshyajit165 if you knew canvas api this would be simple, however you can change the background color using css, and along for the particle colors, make sure you pay attention to your json data.

In other words, particles.color.value must equal #000000

and css, canvas#particles-js { background-color: white !important; }

[LegitSoulja]

@sirStephen the only way possible if you have content overlaying, is passing events to the canvas. Say for example you have a div over the interaction. The div would only know that you're active at div, but not really focusing on the canvas behind. One way of possibly solving this issue is to pass div events to the canvas, or make a fake mouse. There's many ways this can be accomplished.

[lakshyajit165]

Okk thanks...I got it..But I have another issue. I want to add the particles background to a particular section of my personal website(not to the entire website, only to a particular section. My website is built on the "Blue" theme from themefisher.com). How do i do that? I tried but I failed because the canvas size created a problem(i guess, am not sure). If anyone has any idea about it,...please reply or may be we can discuss personally to get it sorted out.

[LegitSoulja]

@lakshyajit165 yeah, you should go learn more css. I cannot give much help on this because I don't know exactly how you want to position your canvas, however this is how you would manage doing so.

canvas#particle-js {
    background-color: white !important;
    /* important */
    position: absolute !important;
    width: 100px !important; // define your width
    height: auto !important; // define your height
    /* depending on where you want this canvas, you can use left/right/top and bottom properties */
    left: 0;
    top: 0; 
}

if you're wondering what !important does, it makes these properties static, and cannot be modified elsewhere. particle js seems to handle width/height and background so you would use !important to override that.

[VnayTri]

I want to use particle js as a background and I want its height small.so how can i decrease its height

[viswabnath]

I want to use particle js as a background and I want its height small.so how can I decrease its height

yes, you can decrease the size of the particles but I'm wondering which height you need to decrease??

[chromahoen]

I extracted a solution from pieces here and there in this thread. I was able to get particle js to persist under the rest of the content.

The content, which in my case is full width, then would have a solid color or image as a background that covered particle js. Then I would make the background transparent on the content where I wanted particle js to be revealed.

This css posted by @LegitSoulja was helpful:

* { z-index: 2; }
.particle, .particle > canvas, #particles-js { z-index: -1 !important; } 

Then I preferred to go with this, which gave me a paralax effect that I apreciated:

#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgb(8, 6, 17); /* this was my color */
    left: 0px;
    top: 0px;
}

The part that threw me was the order of the html tags. @AnonymousNoob tipped us off to this. It needs to be ordered in the html like:

<body>
  <script src="js/creative.min.js"></script>
  <div>content</div>
  <div id="particles-js"></div>
  <script>
      particlesJS("particles-js", {
       //your config 
      });
  </script>
</body>

Once I got it to display properly, I lost mouse events. But I got everything working...

@shaunjc "pointed" me in the right direction with the pointer-events property. I took a shortcut, though:

#content {
    pointer-events: none;
}
a, button {
    pointer-events: all;
}

I just set all the elements that I needed for my project to watch for pointer events.

[Ishub]

Hi, I tried everything suggested above. I'm using Hugo (https://github.com/gcushen/hugo-academic) but I'm unable to keep the interactivity on if I send the particles in the background. I tried setting pointer-events to True as well but it doesn't help. Can someone please help?
I'm working on adding the particles to the header of my website: http://ishub.me/

[shaunjc]

@Ishub Remove the pointer-events: none from #particles-js and it should work correctly; at least it does in my browser.

[Ishub]

@shaunjc On removing the pointer-events, I'm unable to click on buttons as the particle only interact.

[shaunjc]

@Ishub I see. You would most likely need to re-evaluate the order of your layers. Using the inspector window, I have found the following hierarchy and styles to work.

<div class="site-wrapper"><!-- Header etc -->
  <section id="hero_carousel">
    <!-- Carousel  pagination etc -->
    <div class="carousel-inner"><!-- Carousel Items --></div>
    <div id="particles-js" ></div>
    <!-- Carousel  pagination etc -->

#particles-js {
  pointer-events: all; /* or auto, unset, etc */
}

[Ishub]

The thing is the HTML code autogenerates using the template engine I'm using - Hugo (https://themes.gohugo.io/academic/) . So it's very difficult to customize the layer ordering in that. Do you think you could look into the same? I'm trying to put the particles on the Slider widget.

Also, the particles are also there on every page of the website. I only want them on my subdomain.
For your reference: http://shubhamgupta.co/

[coder-examples]

@jdlopez7, there is an alternative
H.T.M.L.
<div id="particles"></div>

C.S.S.
.particles { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; }

[fedebyes]

Thanks @coder-examples putting the position solved my problem that was the interactivity looked shifted, now the only thing is that the browser show me a disabled scrollbar, I think it is from the canvas.

Edit: putting overflow:hidden solved for me, I think it is worth sharing the CSS
#particles-js { width: 100% !important; height: 100% !important; background-color: $gray-900; overflow: hidden; background-size: cover; background-position: 50% 50%; position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; }

[coder-examples]

Ok,
What you can do is this:

// particles
<div class="particles"></div>

// css:

.particles {
margin: 0px!important;
top: 0px!important;
left: 0px!important;
right: 0px!important;
bottom: 0px!important;
z-index: -1;
}

[Luke-Richter]

How do you style the actual particles and little beams, themself? So basically White canvas with black or dark grey particles?

[pushpak1531]

hey i want the particles in the background of the content in just one section and i managed to do that but everything is stuck to the viewport and the height of the website is not increasing based on the content rather it is just stuck to to that size ? can someone please help me out !

[mnishant2]

I have been following this issue. I myself am stuck with applying this script to one of the widgets/sections in Academic Hugo thing.I have tried everything, be it adding custom css,JavaScript to blank.html. currently I have added the whole particle code to the blank.html file. Even tried to change the widget layout. But seems the js gets overlaid by the background of the theme. How can I remove the background and/or make it transparent so that an interactive js background is shown, If anyone has managed to do it, do let me know