Turn off particles when off-screen

[StreetDog1971]

Hi there.

I'm using particles.js with fullpage.js and I was trying to save some memory when the particles go off-screen. It wasn't easy to find a solution, so I thought I might leave it here for anyone having the same problem. My solution is based on issue #86, with some minor modifications.

Fullpage.js allows me to define what happens when I get to a section or when I leave it (when will that section be visible on screen or when will it be off-screen). I added the following code to the "onLeave" function:

cancelRequestAnimFrame(pJSDom[0].pJS.fn.checkAnimFrame); cancelRequestAnimFrame(pJSDom[0].pJS.fn.drawAnimFrame); pJSDom[0].pJS.fn.particlesEmpty(); pJSDom[0].pJS.fn.canvasClear();

This will stop the animation, drop the number of particles to zero and clear the canvas.

To make the particles appear again when returning to this section, I add this code to the "afterLoad" function:

pJSDom[0].pJS.fn.vendors.start();

It should be easy to apply this method to other situations, without fullpage.js. You just need to check for the position of the particles "container" relative to the screen, and turn the particles on and off.

I hope this makes sense. Let me know if there's an easier/better way to do it.

Thanks for this amazing library. Great work!

[wsjscss]

Wow! That's amazing!!! You saved my day! I was searching this answers for 2 weeks and finaly it's here. Thank you very much!

[Julix91]

Is there a way to check for the client's frame rate? if so could i reduce the number of particles when that rate is under a certain number?

[marcmallet]

Thanks Streetdog. Your post gave me some insight on how to extend functionality to it. I wanted to have the animation play for a few seconds and then stop. But with this solution, you should be able to adjust the settings at any time after load:

particlesJS.load('particles-div', 'particlesjs.json', function() {
    setTimeout(function(){                      
              window.pJS_GUI = window.pJSDom[0].pJS;
              pJS_GUI.particles.move.enable = false;
              //pJS_GUI.fn.particlesRefresh();                  
          }, 3000);         
});

[cuiyajie]

Hi, buddy. Your situation is just like mine. Thank you~~~

[kenji-1996]

If anyone knows how to fix this for an angular module here https://github.com/ryuKKu-/angular-particle i would very much appreciate it ^-^

[wbmdesign]

Thanks StreetDog1971! You saved my day! I use https://remysharp.com/2009/01/26/element-in-view-event-plugin/ for viewport detection my complete code looks like this (.transparent is the area where the animation is visible):

$('.transparent').each(function () {
    $(this).bind('inview', monitor);

    function monitor(event, visible) {
        if (visible) {
            if (state == "fresh") {
                state = "visible";
                particlesJS.load('particles-js', particleStyle, function () {});
            }
            if (state != "visible") {
                pJSDom[0].pJS.fn.vendors.start();
                state = "visible";
            }
        } else {
            if (state != "invisible") {
                cancelRequestAnimFrame(pJSDom[0].pJS.fn.checkAnimFrame);
                cancelRequestAnimFrame(pJSDom[0].pJS.fn.drawAnimFrame);
                pJSDom[0].pJS.fn.particlesEmpty();
                pJSDom[0].pJS.fn.canvasClear();
                state = "invisible";
            }
        }
    }
});