1

I have to start by saying I'm an absolute NOOB specially with Javascript, so I need your help, but bear in mind it would be much appreciate if you could explain for noobs and so that way I might learn something.

That being said, I'm using the code and the plugin explained on this website http://cakewp.com/divi-tutorials/add-nice-moving-particles-background-effect/#comment-242 to my development website for a client (second image, the one on the left with pink squares) https://soluzionweb.com/lexmart/

And the problem is that the pink squares, are not squares, but rectangles, unless you zoom in and zoom out the page, which then it renders the squares in a correct size.

I thought it might be a good idea to enqueue the particles.js file in my Wordpress to load at the end of the page, so, it loads once the full page is loaded, but not sure if that is the problem, and not sure if that would be a solution... and more over.. I tried a few functions, but could not figure out what is the correct code to enqueue the Javascript file.

This is what I have actualy:

Wrong

This is what I would like to have:

Right

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
Andres Molina Perez-Tome
  • 437
  • 6
  • 20
  • Try this plugin in a blank page and let us know. Maybe create a [jsfiddle](https://jsfiddle.net/) for us if you can reproduce the issue in a blank page. – T30 Oct 09 '17 at 09:52
  • Hey! First of all T30, thanks a lot for your answer. That being said, i did what you asked (or at least i think) and added the animation to a blank page (i just added a 10% padding on top and bottom) and it still shows deformation on the squares, please see here https://soluzionweb.com/lexmart/particles-test/ I dont know if it will help to solve the problem, but the animation is created by a non comercial plugin that uses this JS file https://soluzionweb.com/lexmart/wp-content/plugins/ParticleJs-WP-Plugin-master//includes/particles.js?ver=4.8.2 – Andres Molina Perez-Tome Oct 09 '17 at 09:56
  • You can try the plugin from this link https://github.com/ingeniousweb/ParticleJs-WP-Plugin/archive/master.zip – Andres Molina Perez-Tome Oct 09 '17 at 10:02
  • Here is a post which will explain to you what happens: https://stackoverflow.com/questions/2588181/canvas-is-stretched-when-using-css-but-normal-with-width-height-properties To fix it would require searching through your links how this canvas is set up, since you didn't provided an [MCVE]. But basically, your canvas' attributes are set to the page's size, while you don't display it full-screen. So you need to find where this size is set, and set it to the correct container's size. – Kaiido Oct 09 '17 at 12:24
  • Hey Kaiido, thanks for the tip! so if that is the case, the only thing i can think of that could be passing the size of the canvas is Json code which is generated by the web on the example. But as i stated on the begining, I have no clue, so if you could give me a hand that would be really wellcome. I cant paste the Json code here, but if you guys inspect element on the website, i think you will be able to see it. – Andres Molina Perez-Tome Oct 09 '17 at 13:13
  • I have been doing some tests on my own (not sure if the correct ones) but it seems to be as you guys specified above, that if you set the height and width on the js and on the css it stretch the images out, now.... im not sure how to just let the js to set the width and height dynamically... – Andres Molina Perez-Tome Oct 09 '17 at 13:52
  • Hey! im not quite sure how, but i think i fixed it by adding this onto the css: .particles-js-canvas-el { height: 50vmax !important; width: 100vmax !important; } does it make any sense? can you guys confirm if you see it properly now? – Andres Molina Perez-Tome Oct 09 '17 at 15:33

1 Answers1

1

This fix problem, adding the following to my style.css active theme file:

.particles-js-canvas-el {
    width: calc(100 * (1vw + 1vh - 1vmin)) !important;
    height: calc(50 * (1vw + 1vh - 1vmin)) !important;
}

Based on some of the above comments, I did some tests to find out that the problem was related to the declaration of the CSS width and height and not in Javascript.

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
Andres Molina Perez-Tome
  • 437
  • 6
  • 20