1

As stated above, I am using the particles.js library to add a background to a div on a site that I am designing.

When the page loads, the correct div has the animation as a background, but it always starts way too "zoomed in". It appears to be using too large a default screen size, however whenever the screen area is changed either by directly changing the window size or opening the developer console it triggers the "resize" event and then everything is displayed correctly.

The resize event code is as follows:

if(pJS && pJS.interactivity.events.resize){

  window.addEventListener('resize', function(){

      pJS.canvas.w = pJS.canvas.el.offsetWidth;
      pJS.canvas.h = pJS.canvas.el.offsetHeight;

      /* resize canvas */
      if(pJS.tmp.retina){
        pJS.canvas.w *= pJS.canvas.pxratio;
        pJS.canvas.h *= pJS.canvas.pxratio;
      }

      pJS.canvas.el.width = pJS.canvas.w;
      pJS.canvas.el.height = pJS.canvas.h;

      /* repaint canvas on anim disabled */
      if(!pJS.particles.move.enable){
        pJS.fn.particlesEmpty();
        pJS.fn.particlesCreate();
        pJS.fn.particlesDraw();
        pJS.fn.vendors.densityAutoParticles();
      }

    /* density particles enabled */
    pJS.fn.vendors.densityAutoParticles();

  });

}

What I am looking for is either a way to get the animation to load properly, or to trigger the resize immediately upon page load so that it always looks right to page visitors.

What I have tried

I have tried manually setting the size of the canvas element that the library creates, however that does not work. I have also tried changing the size of the div that contains the element, and that also does not work.

Potential conflicts or easier solutions

I am using Jquery 3.1.1 and Bootstrap 3

Doug Skinner
  • 47
  • 8
  • Still trying to see if I can understand your question and whether I can answer it or not, but in the meantime I just thought I'd bring out my inner grammar nazi and point out that "sight" is what you see with and "site" is a location, so your first sentence needs editing :P – Clonkex Jun 27 '17 at 03:47
  • @Clonkex updated, thanks for pointing it out. If there's anything I can do to clarify the question please let me know. – Doug Skinner Jun 27 '17 at 03:50
  • Please share code of particle implementation – Nidhin Chandran Jun 27 '17 at 04:10
  • @NidhinChandran are you looking for just the html snippet or the entire javascript file? – Doug Skinner Jun 27 '17 at 04:15
  • just the code for particlejs implementation, if you can reproduce the problem in a snippet of jsfiddle everyone can help you better – Nidhin Chandran Jun 27 '17 at 04:17

1 Answers1

0

To trigger the resize you do:

$(window).trigger('resize');

when the dom is loaded

madalinivascu
  • 32,064
  • 4
  • 39
  • 55