Particles become distorted. Various CODE. about tsparticles HOT 9 CLOSED

@EdgarGR this code pen seems to work fine: https://codepen.io/matteobruni/pen/XWbxQwB

Tell me if it's the solution you were searching

from tsparticles.

Hi Matteo! I need delete the other one? or put in CSS ADITTIONAL CODE?
Thanks for your help!

from tsparticles.

Sorry i'm using (ParticleJS Background). Inside i have the code. But if i put the new one. I can't see anything.
I see in your link looks well. Can you explain me how i can add to my page.
Thanks alot!!

from tsparticles.

The other issue can stay if you want, here I quoted all text. In the codepen I changed the CSS

#tsparticles {
  position: absolute;
  width: 100%;
  height: 800vh; /* changed here! */
  background-color: #010101;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

to simulate a very long container. It seems to work fine, you can try just changing the script reference.

I was checking you CSS and probably it's the issue:

/*Fondo estrellado alto total sin pixelar*/
.particles-js-canvas-el { /* change the selector to its parent */
  height: 100vmax !important;
  z-index: 0;
}

The canvas element style should be left as clean as possible, the canvas is 100% width and height of its container, probably just setting the height to its container solves the issue.

Anyway you can use this project to limit the FPS and improve a little the performance, because the old particles.js pushes the CPU to its limit.

An improvement about performance is under analysis as you can see here #174 because a lot of particles will be a pain in UX.

from tsparticles.

Sorry i'm using (ParticleJS Background). Inside i have the code. But if i put the new one. I can't see anything.
I see in your link looks well. Can you explain me how i can add to my page.
Thanks alot!!

Are you using Wordpress? Is this the plugin are you using? https://wordpress.org/plugins/particle-background-wp/#description

I asked them to replace the old particles.js with this new project but no answer yet.

Anyway you can replace the particles.js in the plugin folder with this file https://cdn.jsdelivr.net/npm/[email protected]/dist/tsparticles.min.js

And you can change the line 204 of the plugin.php inside the plugin folder like this

wp_enqueue_script( 'rn_pbwp-particle-js', RN_PBWP_PLUGINS_URL . '/includes/tsparticles.min.js' );

and the line 230 of the same file like this

wp_enqueue_script( 'rn_pbwp-particle-js', RN_PBWP_PLUGINS_URL . '/includes/tsparticles.min.js' );

I know it's a little tricky but I'll probably checkout this plugin to release a new one with this library.

from tsparticles.

Hi Matteo!
Thank you very much for wasting your time with my query.

I really don't understand what you raised in the previous message. I will try to see if a friend understands it and can do it for me.

I have a very basic knowledge of WP and DIVI. Through tutorials I am adapting the web as best I can.

The plugin is not that. It's this other (this is how I installed it): http://cakewp.com/divi-tutorials/add-nice-moving-particles-background-effect/

After this, as I was stretching the particles I added the additional CSS that you told me was probably giving an error.

Do you think that if I install the new plugin it will be easy for me to get the effect like the one you showed me?

Again, thank you so much! I thank you from my heart!

from tsparticles.

Ok I checked the plugin, if you are using this plugin.

You can change the particlesjs.php with at line 14 like this

wp_enqueue_script( 'iw_particleJs', plugin_dir_url( __FILE__ ) . '/includes/tsparticles.min.js', false );

and delete the particles.js file in the include folder and replace it with the one linked in the previous message.

About the CSS, I try to be clearer.

/*Fondo estrellado alto total sin pixelar*/
.particles-js-canvas-el {
  height: 100vmax !important;
  z-index: 0;
}

this is your original css code you included in the issue.

The error is using .particles-js-canvas-el instead of its container. So instead of referencing the canvas added by particles.js you should change the height of the div you're adding particles to.

It should be something like this

#fondo_particulas1 {
  height: 100vmax !important;
  z-index: 0;
}

If you add scripts directly to DIVI you can change the script you have included from particles.js to tsParticles like explained in the README

If you need more help, try upload some screenshot of how you included the particles.js so I can try fix them

from tsparticles.

Hello @matteobruni im the friend of @EdgarGR helping to try put the particles on the background in our website.

Now i dont using specific Plugin particles, just upload to folder /wp-content/themes/Divi/js the "script.js" downloaded from your CodePen.

And "style.css" in css folder from our Divi theme.

In Wordpress Admin i charge the scripts using "Header and Plugin Scripts Plugin" and put this scripts charging in the header part:

Then i go to the section of the website i want to show our background and on CSS ID insert "tsparticles" but nothing appears.

What we do wrong?

If it help i can charge some screencaptures.

Thanks for your time, really apreciated.

from tsparticles.

Hi @bop64921

<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>

This script is not necessary, it's used for the execution stats you can see in top left corner on codepen

<script src="http://www.wizardingescaperooms.com/wp-content/themes/Divi/js/tsparticles.min.js"></script>
<script src="https://unpkg.com/tsparticles"></script>

These two scripts seems to be the same thing, you can remove the unpkg one.

After this you should have a particlesJS, or tsParticles.load (it's the same), function called. I think it's here

<script src="http://www.wizardingescaperooms.com/wp-content/themes/Divi/js/script.js"></script>

but without the code I can't say.

Try these, if it's not working try attach anything can be useful here

from tsparticles.