Tsparticles: Wordpress issue

[paul300497]

I gotta say I really loved ParticlesJs and seeing TsParticles filled me with joy. I have integrated before particles js to Wordpress, but I seem to be unable to integrate ts particles (not even sure if Wordpress supports TypeScript).

My noobish, highly inexperienced in javascript language question is: Is there any way I could integrate this into my Wordpress site?

More precisely what I was hoping to realize is the background mask, I really wish to achieve this (https://codepen.io/matteobruni/details/WNQQbdW) but even the mask plainly would be great.

Thanks in advance for any answers

[matteobruni]

Hi @paul300497, the output files are plain javascript and you can use them anywhere, only the source code is TypeScript for the typing that gives a lot of help while writing code.

You can follow any guide that you can find on web (without plugins, there are no plugins at the moment that support tsParticles) for the old particles.js, just change the files from the old library with these.

About the slide show it's just a div with a greater z-index than the slide show, and the particles render on that div creating the effect.

If you need more help I'm glad to help but you have to wait some hours, I need some rest 😅.

Hope the informations I gave you for now helped! Don't hesitate to ask 😉

[paul300497]

@matteobruni Thank you so much for the fast reply. I get you, I needed some sleep as well, was kinda late.

I have done the following steps to make ParticlesJs work:

1. Uploaded the files to the FTP server
2. The script source from the header is from wp-content/....../particles.js
3. Called the ID in the div and there it is, on the page

The issue that I am currently having with TsParticles is that I have done the same steps, even tried to put all the files from TsParticles folder into the ParticlesJs-master folder, but whenever I change the source to tsparticles.js the script stops working.

I have tried using tsparticles.js only in the folder downloaded from jsDelivr, I have tried adding it to the master folder, I have tried adding it to ParticlesJs-master folder, nothing worked and I kinda feel doomed at this point. Not sure what to try

[matteobruni]

Ok,

I try to repeat the same steps you said:

1. Download this file https://github.com/matteobruni/tsparticles/releases/tag/1.13.2 (tsparticles.min.js) and upload it to the FTP server
2. <script src="the/path/to/tsparticles.min.js"></script> in the HTML
3. tsParticles.load('id-of-the-div', { /* configuration */ }); or tsParticles.loadJSON('id-of-the-div', 'path/to/config.json').then(function (container) { /* after loading logics */ });

Doing these steps should work. The script file is tsparticles and not particles. If everything works you can safely remove all the particlesJS files, except for the config obviously

[paul300497]

It's 4.41 a.m. currently, spent over 2 days trying to figure out what was wrong and now, now I feel highly stupid. I haven't thought until few minutes ago "Paul, why don't you check the console to look for errors?". Apparently tsParticles.load has been tsparticles.load this whole time

I would like to thank you a lot for your help and to mention that this project that you have created has inspired me to learn JavaScript and in turn to hopefully create something aswell, thank you for that too.

Also, no idea how you have made that slider in the link posted higher (codepen) but it is awesome. I have tried doing that for some time but, as I am not that experienced, I didn't get it done at all haha

[matteobruni]

Thank you very much!

About the slider I forked a pen on CodePen and just added the Particles in background mask mode above it.

If you need Javascript resources CodePen is gold.

I’m using it to be inspired for new features.